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


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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Lightweight-jQuery-Input-Mask-Plugin

Simple and Easy jQuery Input Mask Plugin | InputMask-Phone-Numbers

jquery-input-mask-phone-number.js – Simple and easy jquery phone number mask library. JQuery Plugin for masks input field to US phone format. Must Read: jQuery Creates an Input Mask…

responsive-accordion-ui

Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…