ngx-easy-drag-and-drop-file-upload

Angular Drag and drop based file upload library.

Features

• Clean and minimilist User Interface of file uploader
• Drag and Drop single or multiple files at a time
• Animated and iconified drop zone with Progress bar
• Multiple options supported for file types , number of files limit etc.
• Very lightweight and easy to install

Dependencies

Latest version available for each version of Angular

| Version | Angular version | | ---------- | ----------- | | current | >= 7.x |

Install

npm i easy-drag-and-drop-file-upload --save

Setup

step 1: add dependency in your app.module.ts. Do not forget to add CUSTOM_ELEMENTS_SCHEMA

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from  '@angular/core'; //CUSTOM_ELEMENTS_SCHEMA is mandatory
import { BrowserModule } from  '@angular/platform-browser';

import { EasyDragAndDropFileUploadModule } from  'easy-drag-and-drop-file-upload'; // import module <--
import { AppComponent } from  './app.component';

@NgModule({
declarations: [
	AppComponent
],
imports: [
	BrowserModule,
    EasyDragAndDropFileUploadModule // Module Dependency needs to be register <--
],
providers: [],
bootstrap: [AppComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA] // do not forget to add CUSTOM_ELEMENTS_SCHEMA <--
})

export  class  AppModule { }

Use

Usage in component

import { Component } from  '@angular/core';
@Component({
 selector:  'app-root',
 templateUrl:  './app.component.html',
 styleUrls: ['./app.component.scss']
})

export  class  AppComponent {

// Options
  title = 'Pass your custom title here'; // title / heading
  allowFileTypes = ".xls,.csv,.png"; // file types
  fileLimit = 5; // file limit
  allowMultiple =  true; // allow multiple files

// Recieved files event
getDroppedFiles(e){
  console.log("Dropped recieved File/s >>>> ", e); // here you can proceed with the captured files.
 }
}

HTML

<ngx-easy-dnd-upload
	[title]="title"
	[fileLimit]="5"
	[allowedFiles]="'.csv,.xls,.png'"
	[allowMultiple]="false"
	(droppedFiles)="getDroppedFiles($event)">
</ngx-easy-dnd-upload>

Options

There are several options you can use.

| Option | Type | Default | Description
| ----------------- | ------------------------------ | ------------------------------ | ------------------------------------------------- | | Heading / Title | string | Drag and Drop File Upload | Display heading | | Allowed files | string | ".xls,.csv,.png" | Comma seperated string of different file types which needs to be allowd to be upload | | File limit | number | -1 | Control number of files to be upload. By default there is no limit. | | Multiple files | boolean | true | Allow multiple files by default. But you can restrict and allow only single file at a time to be upload by passing 'false'.

License

MIT

GitHub @aniketjack  ·