{"id":22520536,"url":"https://github.com/web-acad/ng-mat-file-upload","last_synced_at":"2026-05-05T05:39:13.165Z","repository":{"id":57142243,"uuid":"134880915","full_name":"Web-ACAD/ng-mat-file-upload","owner":"Web-ACAD","description":"File input for angular material","archived":false,"fork":false,"pushed_at":"2018-08-24T16:37:54.000Z","size":64,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T09:24:30.003Z","etag":null,"topics":["angular","angular-forms","file","forms","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/Web-ACAD.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}},"created_at":"2018-05-25T16:32:46.000Z","updated_at":"2019-03-30T13:06:40.000Z","dependencies_parsed_at":"2022-09-05T07:50:39.391Z","dependency_job_id":null,"html_url":"https://github.com/Web-ACAD/ng-mat-file-upload","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-ACAD%2Fng-mat-file-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-ACAD%2Fng-mat-file-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-ACAD%2Fng-mat-file-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Web-ACAD%2Fng-mat-file-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Web-ACAD","download_url":"https://codeload.github.com/Web-ACAD/ng-mat-file-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245960835,"owners_count":20700783,"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","angular-forms","file","forms","input","material"],"created_at":"2024-12-07T05:07:52.756Z","updated_at":"2026-05-05T05:39:13.132Z","avatar_url":"https://github.com/Web-ACAD.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version](https://img.shields.io/npm/v/@webacad/ng-mat-file-upload.svg?style=flat-square)](https://www.npmjs.com/package/@webacad/ng-mat-file-upload)\n[![Build Status](https://img.shields.io/travis/Web-ACAD/ng-mat-file-upload.svg?style=flat-square)](https://travis-ci.org/Web-ACAD/ng-mat-file-upload)\n\n# WebACAD/MatFileUpload\n\nFile input for angular material\n\n![default style](./docs/default.png)\n\n## Dependencies\n\n* `@angular/animations`\n* `@angular/cdk`\n* `@angular/common`\n* `@angular/core`\n* `@angular/forms`\n* `@angular/material`\n* `@angular/platform-browser`\n* `@webacad/observable-file-reader`\n* `rxjs`\n\n## Installation\n\n```bash\n$ npm install --save @webacad/ng-mat-file-upload\n```\n\nor with yarn\n\n```bash\n$ yarna add @webacad/ng-mat-file-upload\n```\n\n## Register module\n\n**app.module.ts**\n\n```typescript\nimport {MatFileUploadModule} from '@webacad/ng-mat-file-upload';\n\n@NgModule({\n    imports: [\n        MatFileUploadModule,\n    ],\n})\nexport class AppModule {}\n```\n\n## Usage\n\n```html\n\u003cwa-mat-file-upload\u003eChoose file\u003c/wa-mat-file-upload\u003e\n```\n\n**Available options:**\n\n* `multiple` (boolean): allow to select multiple files\n* `dense` (boolean): show with smaller text sizes\n* `preview` (boolean): display selected files in preview box\n* `previewPosition` (top/bottom): position of preview box, default is `bottom`\n* `color` (string): change color of `mat-raised-button`\n* `selectedText` (function): custom selected text translation function\n\n## Using in angular forms\n\nThis package implements all the necessary code for angular forms. That means that you can use it just like any other \nordinary form control.\n\nIt is also fully ready for material's `\u003cmat-form-field\u003e` component.\n\n## Upload progress\n\n![upload progress](./docs/upload-progress.png)\n\n**Example:**\n\n```html\n\u003cwa-mat-file-upload\n    #fileUpload=\"waMatFileUpload\"\n    placeholder=\"File\"\n    [preview]=\"true\"\n    (change)=\"onFileChange(fileUpload)\"\n\u003eChoose file\u003c/wa-mat-file-upload\u003e\n```\n\n```typescript\nimport {MatFileUploadComponent} from '@webacad/ng-mat-file-upload';\n\nexport class UploadComponent\n{\n    \n    public onFileChange(fileUpload: MatFileUploadComponent): void\n    {\n        const files = fileUpload.files;\n        \n        if (!files.length) {\n            return;\n        }\n        \n        const stepSize: number = 10;\n        \n        this.uploadFile(files[0].file, () =\u003e {\n            files[0].increaseProgress(stepSize);\n        }, () =\u003e {\n            files[0].progress = 100;\n            fileUpload.disabled = true;\n        });\n    }\n    \n    private uploadFile(file: File, onChunk: () =\u003e void, onDone: () =\u003e void): void\n    {\n        // todo\n    }\n    \n}\n```\n\n## Validation\n\nThere are some build in form validators which you can use out of the box.\n\n* `fileMaxSize(number)`: Maximum size of file(s)\n* `fileType(string[])`: List of allowed mime types\n\n## Internationalization\n\nThere is only one text in this component which should be translated for better international support. It is the selected \npreview text next to dialog button.\n\n**Default form:**\n\n* no file selected: empty string\n* 1 file selected: name of selected file\n* more than 1 file selected: `files.length + \" Files selected\"`\n\nCustom value can be provided via `selectedText` input. \n\nFirst create translating method:\n\n```typescript\nimport {UploadFile} from '@webacad/ng-mat-file-upload';\n\nclass MyComponent\n{\n    \n    public translateValue(files: Array\u003cUploadFile\u003e): string\n    {\n        if (!files.length) {\n            return '';\n        }\n        \n        if (files.length === 1) {\n            return '1 file';\n        }\n        \n        return `${files.length} files`;\n    }\n    \n}\n```\n\nNow pass your `translateValue` method into the `selectedText` input:\n\n```html\n\u003cwa-mat-file-upload\n    placeholder=\"File\"\n    [selectedText]=\"translateValue\"\n\u003eChoose file\u003c/wa-mat-file-upload\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-acad%2Fng-mat-file-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-acad%2Fng-mat-file-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-acad%2Fng-mat-file-upload/lists"}