easy-drag-and-drop-file-upload v1.0.3

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

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.

License

MIT

GitHub @aniketjack  ·