Home

Awesome

ngx-file-drag-drop

Check out the Demo

Install

npm i ngx-file-drag-drop

NgxFileDragDropComponent

selector: <ngx-file-drag-drop>

implements: ControlValueAccessor to work with angular forms

Additionnal properties

NameDescription
@Input() multiple: booleanAllows multiple file inputs, false by default
@Input() accept: stringAny value the native accept attribute can get. Doesn't validate input.
@Input() disabled: booleanDisable the input.
@Input() emptyPlaceholder : stringPlaceholder for empty input, default Drop file or click to select
@Input() displayFileSize : booleanShow file size in chip rather than in tooltip, default false
@Input() activeBorderColor: stringA 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) => voidUpdate input
removeFile():(file:File) => voidRemoves the file from the input
clear(): () => voidRemoves all files from the input
files: File[]Getter for form value
isEmpty: booleanWhether 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";
ValidatorDescription
uniqueFileNamesDisallow 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
requiredAt least one file required