{"id":14862283,"url":"https://github.com/daemons88/ngx-custom-material-file-input","last_synced_at":"2026-03-04T03:01:33.956Z","repository":{"id":213323385,"uuid":"733582163","full_name":"daemons88/ngx-custom-material-file-input","owner":"daemons88","description":"File input management for Angular Material","archived":false,"fork":false,"pushed_at":"2025-11-23T15:19:50.000Z","size":1458,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-23T16:19:58.601Z","etag":null,"topics":[],"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/daemons88.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-12-19T16:46:16.000Z","updated_at":"2025-11-23T15:19:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"ebc69761-ff7a-4df2-bc91-d6999207b4c1","html_url":"https://github.com/daemons88/ngx-custom-material-file-input","commit_stats":null,"previous_names":["daemons88/ngx-custom-material-file-input"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/daemons88/ngx-custom-material-file-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daemons88%2Fngx-custom-material-file-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daemons88%2Fngx-custom-material-file-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daemons88%2Fngx-custom-material-file-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daemons88%2Fngx-custom-material-file-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daemons88","download_url":"https://codeload.github.com/daemons88/ngx-custom-material-file-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daemons88%2Fngx-custom-material-file-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30070479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T01:03:42.280Z","status":"online","status_checked_at":"2026-03-04T02:00:07.464Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-09-19T20:01:33.731Z","updated_at":"2026-03-04T03:01:33.950Z","avatar_url":"https://github.com/daemons88.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["File Upload"],"readme":"[![npm version](https://badge.fury.io/js/ngx-custom-material-file-input.svg)](https://badge.fury.io/js/ngx-custom-material-file-input)\n[![npm](https://img.shields.io/npm/dt/ngx-custom-material-file-input.svg)](https://www.npmjs.com/package/ngx-custom-material-file-input)\n[![Known Vulnerabilities](https://snyk.io/test/github/daemons88/ngx-custom-material-file-input/badge.svg)](https://snyk.io/test/github/daemons88/ngx-custom-material-file-input)\n\n# ngx-custom-material-file-input\n\nThis project is a copy of [ngx-material-file-input](https://github.com/merlosy/ngx-material-file-input), this was made from angular 14 as a new project, only what was necessary was added and is already updated.\n\n| Library Version | Angular Version |\n| --------------- | --------------- |\n| 1.0.0           | 14.0.0          |\n| 2.0.0           | 15.0.0          |\n| 3.0.0           | 16.0.0          |\n| 4.0.0           | 17.0.0          |\n| 18.0.0          | 18.0.0          |\n\nFrom now on, the package version will be the same as the Angular version so I don't have to update the table all the time.\n\n- Latest version is using **Angular 21**\n\nFrom Angular 21 onwards, it is only supported as a **standalone component**.\n\n# material-file-input\n\nThis project provides :\n\n- `ngx-mat-file-input` component, to use inside Angular Material `mat-form-field`\n- a `FileValidator` with `acceptedMimeTypes`, to limit the format types using the mime types\n- a `FileValidator` with `maxContentSize`, to limit the file size\n- a `FileValidator` with `minFileCount` and `maxFileCount`, to limit the loaded files\n- a `ByteFormatPipe` to format the file size in a human-readable format\n- a `previewUrls` to receive the images/file as a url to show in a preview\n\nFor more code samples, have a look at the [DEMO SITE](https://merlosy.github.io/ngx-material-file-input)\nor in the [release notes](https://github.com/daemons88/ngx-custom-material-file-input/releases).\n\n## Install\n\n```\nnpm i ngx-custom-material-file-input\n```\n\n## API reference\n\n### MaterialFileInputModule\n\n```ts\nimport { MaterialFileInputModule } from 'ngx-custom-material-file-input';\n\n@NgModule({\n  imports: [\n    // the module for this lib\n    MaterialFileInputModule\n  ]\n})\n```\n\n#### NGX_MAT_FILE_INPUT_CONFIG token (optional):\n\nChange the unit of the ByteFormat pipe\n\n```ts\nexport const config: FileInputConfig = {\n  sizeUnit: \"Octet\",\n};\n\n// add with module injection\nproviders: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];\n```\n\n### FileInputComponent\n\nselector: `\u003cngx-mat-file-input\u003e`\n\nimplements: [MatFormFieldControl](https://material.angular.io/components/form-field/api#MatFormFieldControl)\u003cFileInput\u003e from Angular Material\n\n**Additionnal properties**\n\n| Name                                   | Description                                                                                                                             | Added in Version |\n| :------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :--------------- |\n| _@Input()_ valuePlaceholder: `string`  | Placeholder for file names, empty by default                                                                                            | v1               |\n| _@Input()_ multiple: `boolean`         | Allows multiple file inputs, `false` by default                                                                                         | v1               |\n| _@Input()_ autofilled: `boolean`       | Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.             | v1               |\n| _@Input()_ accept: `string`            | Any value that `accept` attribute can get. [more about \"accept\"](https://www.w3schools.com/tags/att_input_accept.asp)                   | v1               |\n| _@Input()_ checkDuplicates: `boolean`  | Skip duplicated files if the property is added, `false` by default                                                                      | v21              |\n| value: `FileInput`                     | Form control value                                                                                                                      | v1               |\n| empty: `boolean`                       | Whether the input is empty (no files) or not                                                                                            | v1               |\n| clear(): `(event?) =\u003e void`            | Removes all files from the input                                                                                                        | v1               |\n| previewUrls: `string[]`                | Contains a generate url in memory to show the previews of the files                                                                     | v19              |\n| _@Input()_ defaultIconBase64: `string` | Set the default icon for the previews of files that are not images, is a base64 string, example: data:image/svg+xml;base64,PHN2ZyB..... | v19              |\n\n### ByteFormatPipe\n\n**Example**\n\n```html\n\u003cspan\u003e{{ 104857600 | byteFormat }}\u003c/span\u003e\n```\n\n_Output:_ 100 MB\n\n### FileValidator\n\n| Name                                              | Description                                                  | Error structure                             | Added in Version |\n| ------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------- | ---------------- |\n| maxContentSize(value: `number`): `ValidatorFn`    | Limit the total file(s) size to the given value              | `{ actualSize: number, maxSize: number }`   | v1               |\n| acceptedMimeTypes(value: `string`): `ValidatorFn` | Limit the mime types valid to use given value                | `{ validTypes: string }`                    | v18              |\n| minFileCount(value: `number`): `ValidatorFn`      | Limit the total of minimum file(s) loaded to the given value | `{ minCount: number, actualCount: number }` | v20              |\n| maxFileCount(value: `number`): `ValidatorFn`      | Limit the total of maximum file(s) loaded to the given value | `{ maxCount: number, actualCount: number }` | v20              |\n\n**Sponsored by: [MyTalentAid](https://mytalentaid.com/?lang=en)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaemons88%2Fngx-custom-material-file-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaemons88%2Fngx-custom-material-file-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaemons88%2Fngx-custom-material-file-input/lists"}