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();
  }
}

License

MIT

Authors

• @developcastle