Ng-dd-file NPM

NgDdFile

Drag and Drop File for Angular

Getting started

Step 1: Install `ng-dd-file`

NPM

npm install --save ng-dd-file

YARN

yarn add ng-dd-file

Step 2: Import the NgDdFileModule

import { NgDdFileModule } from 'ng-dd-file';

@NgModule({
  declarations: [...],
  imports: [NgDdFileModule],
  bootstrap: [...]
})
export class AppModule {}

Usage

In template use ng-dd-file component with your options

<ng-dd-file 
    [btnClass]="{ file: 'text-red' }"
    [filesList]="filesList" 
    [labels]="{ text: 'Arraste e solte os arquivos', btn: 'SELECIONE O ARQUIVO' }"
    [maxFiles]="3"
    [maxFileSize]="200"
    [maxTotalSize]="300"
    [multiple]="true"
    typeFileAccept="*"

    (fileError)="fileError($event)"
    (fileRemove)="fileRemove($event)" 
    (filesAdd)="filesAdd($event)" 
></ng-dd-file>

API

Inputs

Input	Type	Default	Description
btnClass	{ file: string, remove: string }	-	Custom class for `input:file` and `button:remove`
filesList	any[]	-	List of files
labels	{ text: string, btn: string }	{ text: 'Arraste e solte os arquivos', btn: 'SELECIONE O ARQUIVO' }	Text and button labels
maxFiles	number	-	Maximum files allowed
maxFileSize	number (`kB`)	-	Maximum size of each file
maxTotalSize	number (`kB`)	-	Maximum size of all file
multiple	boolean	false	Allowed to add more than one file
typeFileAccept	string	*	Same as HTML attribute: accept