Ngx File Upload Component For The Angular Framework

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 allow
capture What source to use for capturing an image or video data
multiple A Boolean, if present, indicates that the user may choose more than one file. Default true.
disableMultipart. Ngx-uploader uses, by default, the content-type multipart when it sends a file. This boolean allows changing the content type of the request by the type of the file when its value is true.

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