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.