{"id":13808444,"url":"https://github.com/telebroad/ngx-file-drag-drop","last_synced_at":"2025-04-13T10:44:19.502Z","repository":{"id":37985482,"uuid":"273062579","full_name":"telebroad/ngx-file-drag-drop","owner":"telebroad","description":"A simple angular material file input component which lets the user drag and drop files, or select files with the native file picker.","archived":false,"fork":false,"pushed_at":"2024-12-23T17:45:09.000Z","size":1937,"stargazers_count":18,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T02:36:23.683Z","etag":null,"topics":["angular","component","drag-and-drop","file","file-drop","file-picker","input","material"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/telebroad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-17T19:35:31.000Z","updated_at":"2025-03-24T23:33:18.000Z","dependencies_parsed_at":"2024-05-30T17:40:15.704Z","dependency_job_id":"45441c04-daaf-42fe-87b5-7e8842343689","html_url":"https://github.com/telebroad/ngx-file-drag-drop","commit_stats":{"total_commits":99,"total_committers":6,"mean_commits":16.5,"dds":0.4444444444444444,"last_synced_commit":"d902640f0ad74e9c8f679a199cb6213be0d7de02"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telebroad%2Fngx-file-drag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telebroad%2Fngx-file-drag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telebroad%2Fngx-file-drag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telebroad%2Fngx-file-drag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/telebroad","download_url":"https://codeload.github.com/telebroad/ngx-file-drag-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248702107,"owners_count":21148114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component","drag-and-drop","file","file-drop","file-picker","input","material"],"created_at":"2024-08-04T01:01:42.968Z","updated_at":"2025-04-13T10:44:19.472Z","avatar_url":"https://github.com/telebroad.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Drag and Drop"],"readme":"# ngx-file-drag-drop\n\n#### Check out the [Demo](https://stackblitz.com/edit/ngx-file-drag-drop)\n\n## Install\n\n```\nnpm i ngx-file-drag-drop\n```\n\n### NgxFileDragDropComponent\n\nselector: `\u003cngx-file-drag-drop\u003e`\n\nimplements: [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor) to work with angular forms\n\n**Additionnal properties**\n\n| Name                                                     | Description                                                              |\n| -------------------------------------------------------- | ------------------------------------------------------------------------ |\n| _@Input()_ multiple: `boolean`                           | Allows multiple file inputs, `false` by default                          |\n| _@Input()_ accept: `string`                              | Any value the native `accept` attribute can get. Doesn't validate input. |\n| _@Input()_ disabled: `boolean`                           | Disable the input.                                                       |\n| _@Input()_ emptyPlaceholder : `string`                   | Placeholder for empty input, default `Drop file or click to select`      |\n| _@Input()_ displayFileSize : `boolean`                   | Show file size in chip rather than in tooltip, default `false`           |\n| _@Input()_ activeBorderColor: `string`                   | A css color for when file is dragged into drop area, default `purple`    |\n| _@Output()_ valueChanged:`EventEmitter\u003cFile[]\u003e`          | Event emitted when input value changes                                   |\n| addFiles():`(files: File[] \\| FileList \\| File) =\u003e void` | Update input                                                             |\n| removeFile():`(file:File) =\u003e void`                       | Removes the file from the input                                          |\n| clear(): `() =\u003e void`                                    | Removes all files from the input                                         |\n| files: `File[]`                                          | Getter for form value                                                    |\n| isEmpty: `boolean`                                       | Whether the input is empty (no files) or not                             |\n\n### BytePipe\n\nUsage:\n\n```html\n\u003cspan\u003e{{ 104857600 | byteFormat }}\u003c/span\u003e\n```\n\n_Output:_ 100 MB\n\n### Validators\n\n```ts\nimport { FileValidators } from \"ngx-file-drag-drop\";\n```\n\n| Validator                             | Description                            |\n| ------------------------------------- | -------------------------------------- |\n| `uniqueFileNames`                     | Disallow two files with same file name |\n| `fileExtension(ext: string[])`        | Required file extensions               |\n| `fileType(types: string[] \\| RegExp)` | Required Mime Types                    |\n| `maxFileCount(count: number)`         | Max number of files                    |\n| `maxFileSize(bytes: number)`          | Max bytes allowed per file             |\n| `maxTotalSize(bytes: number)`         | Max total input size                   |\n| `required`                            | At least one file required             |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelebroad%2Fngx-file-drag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelebroad%2Fngx-file-drag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelebroad%2Fngx-file-drag-drop/lists"}