Simple Material Upload Module For Angular | Ngx-upload

Ngx-upload is an angular framework module that supports drag and drop, upload progress, and managing file upload queues for you. Ngx-upload links to anyone’s presentation framework, but you can use it with ng(x) -bootstrap or angular material design without any issues.

file upload in angular, angular file upload example, angular material upload file, ng file upload angular, angular upload file, angular file upload component

How to make use of it:

Installation:

npm install @wkoza/ngx-upload
OR
yarn add @wkoza/ngx-upload

1. Simply include NgxUploadModule in your root module using HttpClientModule and (FormsModule or ReactiveFormsModule):

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import {NgxUploadModule} from '@wkoza/ngx-upload';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule, // or ReactiveFormsModule
    NgxUploadModule.forRoot()
  ]
})
export class AppModule {}

2. For this, you have to add the DropTargetOptions config object like this:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';
import {NgxUploadModule, MineTypeEnum, DropTargetOptions} from '@wkoza/ngx-upload';

export const ngxDropTargetOptions: DropTargetOptions = {
  color: 'dropZoneColor',
  colorDrag: 'dropZoneColorDrag',
  colorDrop: 'dropZoneColorDrop',
  multiple: true,
  accept: [MineTypeEnum.Image, MineTypeEnum.Application_Pdf]
};

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule, // or ReactiveFormsModule
    NgxUploadModule.forRoot(ngxDropTargetOptions)
  ]
})
export class AppModule {}

3. You should also declare these CSS classes in your CSS:

.dropZoneColor {
  border: 3px dotted rgba(0,0,0,0.08);
  background-color: rgba(0,0,0,0.12)
}

.dropZoneColorDrag {
  border: 3px dotted rgba(0,0,0,0.28);
  background-color: grey
}

.dropZoneColorDrop {
  border: 3px dotted rgba(0,0,0,0.08);
  background-color: rgba(0,0,0,0.12)
}

Upload Module for Angular, Ngx-upload Plugin/Github


See Demo And Download

Official Website(wKoza): Click Here

This superior jQuery/javascript plugin is developed by wKoza. For extra Advanced usage, please go to the official website.

Share