ebxDropzone

This directive can be used on any element (host) to create a "Drag N' Drop" zone for multi-file upload. Clicking the zone will also launch the browser's default FileOpen dialog.

Installing

npm install ebxdropzone

Basic Usage

in your app.module.ts

import {EbxDropZoneModule} from 'ebxdropzone';

in the @NgModule portion of code, import the module.

@NgModule({
  imports: [
    EbxDropZoneModule
  ]
  //...

Use it in your template

<div
ebxDropzone
[zoneonly]="true"
(filesChanged)="dosomething($event)">
</div>

Inputs

[zoneonly]="true|false"

If true the directive will prevent any dragover and drop event outside of the directive. If false, default behavior is observed.

Events

filesChanged

An event that is fired when the files are select or dropped on the host. Emits FileList

CSS

.dragover

dragover and dragleave will toggle the ".dragover" CSS class on the host. This handy CSS class that can be used for providing some type of user interface changes so the user knows they can drop the files. In the example provided below; we use this to color the drop zone green when the user can drop files.

Example Use Case

HTML

<div
ebxDropzone
[zoneonly]="true"
(filesChanged)="dosomething($event)"
class="dropzone">
</div>

SCSS

/*
Style your element
This creates a 90px wide bar on the right of the screen.
*/
.dropzone{
  position: fixed;
  right: 0;
  top: 0;
  width: 90px;
  height: 100%;
  background-color: rgb(230, 230, 230);
  border-left: 1px solid rgb(209, 209, 209);
  cursor: pointer;
/*
 Makes use of the "dragover" class added by the directive.
 We use it to change background of the host to green
 to indicate to the user they can drop.
*/
  &.dragover {
    background-color: rgb(108, 255, 108);
  }
}

TypeScript

dosomething(fileList : FileList){
  console.log(fileList.length);
}