A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.
npm i ngx-file-drag-drop
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 |
Usage:
<span>{{ 104857600 | byteFormat }}</span>
Output: 100 MB
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 |