Ng-dropfile NPM

ng-dropfile

An easy-to-use and customizable Angular component for handling files with style.

Advanced features
Customizable
Image preview
File deletion
Multiple event triggers

Installation

Install ng-dropfile package with npm

  npm install ng-dropfile

Setup

Import the ngDropfileModule in your application.

import { CommonModule } from '@angular/common';
import { NgDropfileModule } from 'ng-dropfile';

@NgModule({
  imports: [
    CommonModule,
    NgDropfileModule,
  ],
  bootstrap: [...],
  declarations: [...],
})
class MainModule {}

Usage/Examples

Create the directive where you need it:

<ng-dropfile></ng-dropfile>

You can customize your dropfile properties directly. In this example, we change the default maxFileSize from 1MB to 5MB.

<ng-dropfile [maxFileSize]="5"></ng-dropfile>

This is how you can change the default messages for the component:

<ng-dropfile [messages]=:'Drag and Drop your files'}"></ng-dropfile>

You also can capture the emmited events:

<ng-dropfile (onClear)="myFunction($event)"></ng-dropfile>

Options

Individual customizable options.

Option	Description	Type	Default Value
`maxFileSize`	Maximum file size in megabytes.	`number`	1
`multiple`	Allow multiple file selection.	`boolean`	true
`showErrors`	Show or hide error messages.	`boolean`	true
`showFileList`	Show or hide the list of selected files.	`boolean`	true
`formatsAccepted`	Accepted file formats.	`string[]`	'png', 'jpg', 'jpeg', 'gif', 'pdf'
`messages`	Custom messages for the user interface.	`object`
`button`	Default message to browse button.	`string`	Browse file
`default`	Default message to select file.	`string`	Choose a file or drag and drop it here
`formats`	Default message for accepted formats/extensions.	`string`	Only \<formats> formats accepted.
`default`	Default message to replace file.	`string`	Click to replace
`errors`	Possible error messages.	`object`
`default`	Default error message	`string`	Ooops; something wrong happened.
`filesize`	Default error message for file size.	`string`	Some files are too big. Max file size: \<maxFileSize> MB.
`formats`	Default message to replace file.	`string`	Some files don't match the valid formats.

Events

Event	Description	Response
`onDelete`	Triggered when a file is deleted or removed.	`File`
`onSelect`	Triggered when one or more files are selected.	`File[]`
`onError`	Triggered when an error occurs.	`string`
`onClear`	Triggered when the component is reset or cleared.	`void`

Methods

Event	Description	Event Type
`getFiles`	Get the selected files.	`File[]`
`clear`	Clear all selected files.	`void`

You can call a dropfile child component method assigning a #id in your <ng-dropfile> tag in your html:

<ng-dropfile #dropfileChild ></ng-dropfile>

And access it in your parent component in this way:

export class MyComponent {

 constructor(){ }

@ViewChild(DropfileComponent) dropfileChild: DropfileComponent;

myClearFunction(){
    this.dropfileChild.clear();
  }
}