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
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 |