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 |