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