This tool is a simple & configurable file upload component for use with Angular Material.
Live Demo: https://bjsawyer.github.io/mat-file-upload/
![Screenshot 2024-07-15 at 5 06 27 PM](https://private-user-images.githubusercontent.com/8974594/348855532-aa8deb75-8f93-47ef-abcd-42f9b2ede008.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDU4OTQsIm5iZiI6MTcyNDEwNTU5NCwicGF0aCI6Ii84OTc0NTk0LzM0ODg1NTUzMi1hYThkZWI3NS04ZjkzLTQ3ZWYtYWJjZC00MmY5YjJlZGUwMDgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTlUMjIxMzE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2RjYWUyMGRkMWJjNGQ5OTQzMDBmODBhMjRhZjM0Zjc5Zjc2NDA0OTUyODA1YTc0NTc5Nzc1YTkzOWM5MWQxOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ZtRgb1W-NFu6Q3sTvEKN22aKsNWZkVLLG-lDV8xMTAw)
In order to use mat-file-upload
in your app, you must have the following dependencies installed:
- Install package from npm (
npm i mat-file-upload
). - Add
MatFileUploadModule
to your module's imports, like so:
@NgModule({
declarations: [AppComponent],
imports: [
...
MatFileUploadModule,
...
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
- Add the element to your template, like so:
Basic:
<mat-file-upload></mat-file-upload>
Advanced:
<mat-file-upload
[labelText]="'Select a file (or multiple) to upload:'"
[selectButtonText]="'Choose File(s)'"
[selectFilesButtonType]="button"
[uploadButtonText]="'Submit'"
[uploadButtonType]="submit"
[allowMultipleFiles]="true"
[showUploadButton]="true"
[customSvgIcon]="'close_custom'"
[acceptedTypes]="'.png, .jpg, .jpeg'"
(uploadClicked)="onUploadClicked($event)"
(selectedFilesChanged)="onSelectedFilesChanged($event)"
>
</mat-file-upload>
Directive | Type | Description | Default Value |
---|---|---|---|
[labelText] |
string |
The text to be displayed for the file upload label | "Select file(s)" |
[selectButtonText] |
string |
The text to be displayed for the button that allows the user to select file(s) | "Select file(s)" |
[selectFilesButtonType] |
string |
The HTML "type" attribute of the "Select Files" button | "button" |
[uploadButtonText] |
string |
The text to be displayed for the button that allows the user to upload file(s) | "Upload File(s)" |
[uploadButtonType] |
string |
The HTML "type" attribute of the "Upload" button | "button" |
[allowMultipleFiles] |
boolean |
True/false representing whether the user can select multiple files at a time | false |
[showUploadButton] |
boolean |
True/false representing whether the "Upload" button is shown in the DOM | true |
[customSvgIcon] |
string |
The name of the custom svgIcon to be used as the "close" button; otherwise defaults to Material's "close" icon | null |
[acceptedTypes] |
string |
The list of file types that are allowed to be uploaded | "*.*" |
Directive | Type | Description |
---|---|---|
(uploadClicked) |
EventEmitter<FileList> |
Event handler that emits the list of selected files whenever the "Upload" button is clicked |
(selectedFilesChanged) |
EventEmitter<FileList> |
Event handler that emits the list of selected files whenever the user changes file selection |