JSPM

Angular file drag drop is simple multiple files drag and drop module in Angular 7, also allows to select multiple files using button given. It gives selected files array as output and you can do whatever you wanted to with them, for example upload to a server.

Install

npm i angular-file-drag-drop

Usage

• Import AngularFileDragDropModule in your app.module.ts

import {AngularFileDragDropModule} from 'angular-file-drag-drop';

@NgModule({
  imports: [
      ...,
      AngularFileDragDropModule,
      ...
  ]
})

Example-1 ( with default configuration )

<angular-file-drag-drop (select)="onFileSelect($event)"
                        (dropAreaHovering)="onDropAreaHover($event)">
</angular-file-drag-drop>

• select event gives the array of selected files. This event occurs on click of Done button.
• dropAreaHovering event gives the boolean, whether the file drop zone is hovered or not.

Example-2 ( with custom configuration )

<angular-file-drag-drop [maxSize]="2"
                        [maxFiles]="10"
                        [removeButton]="true"
                        [submitBtnText]="'Upload'"
                        [showSupportedFormats]="true"
                        [acceptedFormats]="['.png', '.jpeg', 'gz','.ppk']"
                        (select)="onFileSelect($event)"
                        (dropAreaHovering)="onDropAreaHover($event)">
</angular-file-drag-drop>

There are two button Done and Reset:

• Done button fires the select event and gives the selected files array.
• Reset button resets the selected files.

Coming Soon:

• Directory upload