{"id":13497508,"url":"https://github.com/merlosy/ngx-material-file-input","last_synced_at":"2025-05-15T03:08:08.780Z","repository":{"id":32235717,"uuid":"127648789","full_name":"merlosy/ngx-material-file-input","owner":"merlosy","description":"File input for Angular Material form-field","archived":false,"fork":false,"pushed_at":"2025-05-09T19:18:51.000Z","size":12632,"stargazers_count":258,"open_issues_count":47,"forks_count":67,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-09T20:27:19.867Z","etag":null,"topics":["angular","file","input","material","upload"],"latest_commit_sha":null,"homepage":"https://merlosy.github.io/ngx-material-file-input","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/merlosy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["merlosy"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2018-04-01T16:23:58.000Z","updated_at":"2025-04-30T21:12:38.000Z","dependencies_parsed_at":"2023-11-27T15:29:06.464Z","dependency_job_id":"69ae6699-de54-491d-80f3-c6b18d316b56","html_url":"https://github.com/merlosy/ngx-material-file-input","commit_stats":{"total_commits":121,"total_committers":9,"mean_commits":"13.444444444444445","dds":"0.18181818181818177","last_synced_commit":"1b40f64e3e33439e945bde49962cb32f64d10119"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlosy%2Fngx-material-file-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlosy%2Fngx-material-file-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlosy%2Fngx-material-file-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlosy%2Fngx-material-file-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merlosy","download_url":"https://codeload.github.com/merlosy/ngx-material-file-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264769,"owners_count":22041794,"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","file","input","material","upload"],"created_at":"2024-07-31T20:00:32.236Z","updated_at":"2025-05-15T03:08:03.770Z","avatar_url":"https://github.com/merlosy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/merlosy"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"[![npm version](https://badge.fury.io/js/ngx-material-file-input.svg)](https://badge.fury.io/js/ngx-material-file-input)\n[![Build Status](https://app.travis-ci.com/merlosy/ngx-material-file-input.svg?branch=master)](https://app.travis-ci.com/merlosy/ngx-material-file-input)\n[![npm](https://img.shields.io/npm/dt/ngx-material-file-input.svg)](https://www.npmjs.com/package/ngx-material-file-input)\n[![](http://img.badgesize.io/https://unpkg.com/ngx-material-file-input@latest/bundles/ngx-material-file-input.umd.min.js?label=full%20size%20as%20min.js\u0026compression=gzip\u0026style=square\u0026color=02adff)](https://www.npmjs.com/package/ngx-material-file-input)\n[![Coverage Status](https://coveralls.io/repos/github/merlosy/ngx-material-file-input/badge.svg)](https://coveralls.io/github/merlosy/ngx-material-file-input)\n[![Known Vulnerabilities](https://snyk.io/test/github/merlosy/ngx-material-file-input/badge.svg)](https://snyk.io/test/github/merlosy/ngx-material-file-input)\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 `maxContentSize`, to limit the file size\n* a `ByteFormatPipe` to format the file size in a human-readable format\n\nFor more code samples, have a look at the [DEMO SITE](https://merlosy.github.io/ngx-material-file-input)\n\n## Install\n\n```\nnpm i ngx-material-file-input\n```\n\n## API reference\n\n### MaterialFileInputModule\n\n```ts\nimport { MaterialFileInputModule } from 'ngx-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                                                                                                                 |\n| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| _@Input()_ valuePlaceholder: `string` | Placeholder for file names, empty by default                                                                                |\n| _@Input()_ multiple: `boolean`        | Allows multiple file inputs, `false` by default                                                                             |\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. |\n| _@Input()_ accept: `string`           | Any value that `accept` attribute can get. [more about \"accept\"](https://www.w3schools.com/tags/att_input_accept.asp)       |\n| value: `FileInput`                    | Form control value                                                                                                          |\n| empty: `boolean`                    | Whether the input is empty (no files) or not                                                                                                          |\n| clear(): `(event?) =\u003e void`                    | Removes all files from the input                                                                                                          |\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                           |\n| ---------------------------------------------- | ----------------------------------------------- | ----------------------------------------- |\n| maxContentSize(value: `number`): `ValidatorFn` | Limit the total file(s) size to the given value | `{ actualSize: number, maxSize: number }` |\n\n# About me\n\n[@jereyleg](https://twitter.com/jereyleg)\n\n\u0026star; to show support :)\n\n# Roadmap\n\n* drop event to add files\n* _ideas?_\n\n# Kudos to\n\n* https://github.com/dherges/ng-packagr\n* Jason Aden - Packaging Angular Libraries https://www.youtube.com/watch?v=QfvwQEJVOig\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerlosy%2Fngx-material-file-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerlosy%2Fngx-material-file-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerlosy%2Fngx-material-file-input/lists"}