NGX-upload is a module for the Angular framework. NGX-upload supports clouds and escape, download progress, and runs the file upload menu for you. NGX-upload is associated with the framework of anyone’s display, but you can use it with the design of the NG (X) corner materials or the design of the corner materials without any problems.
angular 12 file upload example, angular material upload file, angular file upload component, angular module for upload, how to use angular.module, how to add angular module
Trigger An Event After Loaded/Uploading All Images jQuery plugin
How to make use of it:
Installation:
npm install @wkoza/ngx-upload OR yarn add @wkoza/ngx-upload
1. Just include NgxUploadModule in your root module with 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 should add the configuration object DropTargetOptions 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 {}
.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) }
There are also 4 properties:
accept
One or more unique file type specifiers describing file types to allowcapture
What source to use for capturing an image or video datamultiple
A Boolean, if present, indicates that the user may choose more than one file. Defaulttrue
.disableMultipart
. Ngx-uploader uses, by default, the content-typemultipart
when it sends a file. This boolean allows changing the content type of the request by the type of the file when its value istrue
.
Hooks
Ngx-upload offers 7 Observable
to handle a specific behavior :
- onCancel$ : This Observable emits when the upload is canceled.
- onError$<{ item: FileItem, body: any, status: number, headers: any }>: This Observable emits an error during the upload process.
- onSuccess$<{ item: FileItem, body: any, status: number, headers: any }>: This Observable emits on success.
- onBeforeUploadItem$ : This Observable emits just before the upload process.
- onProgress$<{ item: FileItem, progress: number }> : This Observable emits during the upload process.
- onAddToQueue$<>: This Observable is triggered when a file is added to the queue.
- onDropError$<{ item?: File, errorAccept: boolean, errorMultiple: boolean }>: This Observable is triggered when a file is not accepted in the queue.
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.