Angular Drag and drop based file upload library.
- 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
Latest version available for each version of Angular
ngx-toastr | Angular |
---|---|
current | >= 7.x |
npm i easy-drag-and-drop-file-upload --save
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 { }
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>
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'. |
MIT
GitHub @aniketjack ·