ngx-file-drag-drop

#### Check out the Demo

Install

``
npm i ngx-file-drag-drop
`

$3

selector:

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

$3

Usage:

`html
{{ 104857600 | byteFormat }}
`

_Output:_ 100 MB

$3

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