# ngx-file-drag-drop

> angular material file input component supports file drag and drop, and selection with native file picker

Latest version **11.0.0** (published 2024-12-23) · 0 weekly downloads

## Install

```sh
npm install ngx-file-drag-drop
pnpm add ngx-file-drag-drop
yarn add ngx-file-drag-drop
bun add ngx-file-drag-drop
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 11.0.0 |
| Published | 2024-12-23 |
| First published | 2020-06-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 52.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Maintainers | emmbee7806 |
| Keywords | angular, material, file, input, component, file-picker, drag-and-drop, file-drop, ngx-file-drag-drop |

## Links

- npm: https://www.npmjs.com/package/ngx-file-drag-drop
- Repository: https://github.com/telebroad/ngx-file-drag-drop
- Issues: https://github.com/telebroad/ngx-file-drag-drop/issues
- npm.io page: https://npm.io/package/ngx-file-drag-drop

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 11.0.0 (latest) — 2024-12-23
- 10.0.1 — 2024-05-30
- 10.0.0 — 2024-05-30
- 9.0.0 — 2023-12-07
- 8.0.0 — 2023-08-10
- 7.0.0 — 2022-12-19
- 6.0.0 — 2022-06-13
- 5.1.3 — 2021-12-02
- 5.1.2 — 2021-05-25
- 5.1.1 — 2020-11-17
- 5.1.0 — 2020-09-23
- 5.0.0 — 2020-07-08
- 4.0.4 — 2020-07-08
- 4.0.2 — 2020-07-01
- 4.0.1 — 2020-06-30
- … 7 more at https://npm.io/package/ngx-file-drag-drop/versions

## README

# ngx-file-drag-drop

#### Check out the [Demo](https://stackblitz.com/edit/ngx-file-drag-drop)

## Install

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

### NgxFileDragDropComponent

selector: `<ngx-file-drag-drop>`

implements: [ControlValueAccessor](https://angular.io/api/forms/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:

```html
<span>{{ 104857600 | byteFormat }}</span>
```

_Output:_ 100 MB

### Validators

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

---
_Source: https://npm.io/package/ngx-file-drag-drop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._