Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/telebroad/ngx-file-drag-drop
A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.
https://github.com/telebroad/ngx-file-drag-drop
angular component drag-and-drop file file-drop file-picker input material
Last synced: 3 months ago
JSON representation
A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.
- Host: GitHub
- URL: https://github.com/telebroad/ngx-file-drag-drop
- Owner: telebroad
- License: mit
- Created: 2020-06-17T19:35:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-08T13:58:26.000Z (4 months ago)
- Last Synced: 2024-08-02T07:08:24.616Z (3 months ago)
- Topics: angular, component, drag-and-drop, file, file-drop, file-picker, input, material
- Language: TypeScript
- Size: 2.63 MB
- Stars: 17
- Watchers: 3
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-file-drag-drop - Angular material file input component which lets the user drag and drop files, or select files with the native file picker. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-file-drag-drop - Angular material file input component which lets the user drag and drop files, or select files with the native file picker. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-file-drag-drop - Angular material file input component which lets the user drag and drop files, or select files with the native file picker. (Table of contents / Third Party Components)
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: ``
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` | 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
{{ 104857600 | byteFormat }}
```
_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 |