Check out demo
Drag and drop single or multiple files in angular. Either use our predefined interface or If you have your own interface just use directive only.
Install via npm
npm install --save ng-file-drag-drop
Import the module
Import in app.module.ts
or respective module if you are using lazy loading.
import {NgFileDragDropModule} from 'ng-file-drag-drop';
@NgModule({
declarations: [AppComponent,],
imports: [NgFileDragDropModule....],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
If you want to use our interface
Use ng-file-drag-drop
selector and bind with uploadedFiles
event.
<ng-file-drag-drop (uploadedFiles)="getUploadedFiles($event)" [fileConfig]="dragDropConfig"> </ng-file-drag-drop>
fileConfig
is used to configure some properties to show/hide uploaded files as shown below:
dragDropConfig = {
showList:true,
showProgress:false
}
It should be defined in component/service file.
If you have your own custom interface
Just use ngFileDragDrop
directive and bind with fileDropped
event emitter as shown below:
<div class="fileDropZone" ngFileDragDrop (fileDropped)="getUploadedFiles($event)">
<input type="file" multiple>Drag Drop files Here
</div>
Bind any method with fileDropped or uploadedFiles
event. For example here we have used getUploadedFiles in our case.
getUploadedFiles(files) {
console.log('My uploaded files',files)
}
Property | Behaviour | Default |
---|---|---|
showList | Show/Hide uploaded file list | true |
showProgress | Show/Hide progress bar | true |