Ngx-file-drag-drop NPM

ngx-file-drag-drop

Check out the Demo

Install

npm i ngx-file-drag-drop

API reference

NgxFileDragDropModule

import { NgxFileDragDropModule } from 'ngx-file-drag-drop';

@NgModule({
  imports: [
    // the module for this lib
    NgxFileDragDropDropModule
  ]
})

NgxFileDragDropComponent

selector: <ngx-file-drag-drop>

implements: ControlValueAccessor to work with angular forms

Additionnal properties

Name	Description
@Input() multiple: `boolean`	Allows multiple file inputs, `false` by default
@Input() accept: `string`	Any value the native `accept` attribute can get. Doesn't validate input.
@Input() disabled: `boolean`	Disable the input.
@Input() emptyPlaceholder : `string`	Placeholder for empty input, default `Drop file or click to select`
@Input() displayFileSize : `boolean`	Show file size in chip rather than in tooltip, default `false`
@Input() activeBorderColor: `string`	A css color for when file is dragged into drop area, default `purple`
@Output() valueChanged:`EventEmitter<File[]>`	Event emitted when input value changes
addFiles():`(files: File[] \\| FileList \\| File) => void`	Update input
removeFile():`(file:File) => void`	Removes the file from the input
clear(): `() => void`	Removes all files from the input
files: `File[]`	Getter for form value
isEmpty: `boolean`	Whether the input is empty (no files) or not

BytePipe

Usage:

<span>{{ 104857600 | byteFormat }}</span>

Output: 100 MB

Validators

import { FileValidators } from "ngx-file-drag-drop";

Validator	Description
`uniqueFileNames`	Disallow two files with same file name
`fileExtension(ext: string[])`	Required file extensions
`fileType(types: string[] \\| RegExp)`	Required Mime Types
`maxFileCount(count: number)`	Max number of files
`maxFileSize(bytes: number)`	Max bytes allowed per file
`maxTotalSize(bytes: number)`	Max total input size
`required`	At least one file required