@ebcoder/ngx-filequake v0.0.3

ngx-filequake

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

Installing

Using Yarn

yarn add @ebcoder/ngx-filequake

Using NPM

npm install @ebcoder/ngx-filequake

Basic Usage

in your app.module.ts

import {NgxFilequakeModule} from '@ebcoder/ngx-filequake';

//.....

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

Use it in your template

<div
ngxFilequake
[zoneonly]="true"
[canclick]="true"
dialogaccept="image/*"
(filesChanged)="doSomething($event)">
</div>

Inputs

[zoneonly]="boolean" (default: false)

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

[canclick]="boolean" (default: true)

If true the directive will generate an invisible file input as this is the only known way to provide a file dialog. The directive will create the element and use CSS to hide the element. Clicking on the decorated element will invoke the click event on the file input and pass the files selected back to the directive and then invoking filesChanged

dialogaccept="string" (default: '')

This string is simply passed to the dynamically created file input's accept value. See: accept Attribute.

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

Template

<div
ngxFilequake
[zoneonly]="true"
[canclick]="true"
dialogaccept="image/*"
(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);
}