Are you looking for file upload component for your angular app if yes then in this post I am going to share a simple & configurable file upload component for use with Angular Material.
- Install package from npm (
npm i mat-file-upload). - Add
MatFileUploadModuleto 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:
Advanced:
Options
@Input() Properties
| 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)” |
[uploadButtonText] |
string |
The text to be displayed for the button that allows the user to upload file(s) | “Upload File(s)” |
[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 | “*.*” |
@Output() Properties
| Directive | Type | Description |
|---|---|---|
(uploadClicked) |
EventEmitter |
Event handler that emits the list of selected files whenever the “Upload” button is clicked |
(selectedFilesChanged) |
EventEmitter |
Event handler that emits the list of selected files whenever the user changes file selection |
See live demo and download source code.
This awesome script developed by bjsawyer. Visit their official repository for more information and follow for future updates.
