JavaScriptAngularJSMaterial Design Angular File Upload Component

Material Design Angular File Upload Component

This tool is a simple & configurable file upload component for use with Angular Material. you can use this component to upload files.

Quick Look :-

Prerequisites

In order to use mat-file-upload in your app, you must have the following dependencies installed:

  • Angular
  • Angular Material
  • Material Icons

Usage

  1. Install package from npm (npm i mat-file-upload).
  2. Add MatFileUploadModule to your module’s imports, like so:
@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    MatFileUploadModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
  1. 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>

Options

@Input() Properties

DirectiveTypeDescriptionDefault Value
[labelText]stringThe text to be displayed for the file upload label“Select file(s)”
[selectButtonText]stringThe text to be displayed for the button that allows the user to select file(s)“Select file(s)”
[selectFilesButtonType]stringThe HTML “type” attribute of the “Select Files” button“button”
[uploadButtonText]stringThe text to be displayed for the button that allows the user to upload file(s)“Upload File(s)”
[uploadButtonType]stringThe HTML “type” attribute of the “Upload” button“button”
[allowMultipleFiles]booleanTrue/false representing whether the user can select multiple files at a timefalse
[showUploadButton]booleanTrue/false representing whether the “Upload” button is shown in the DOMtrue
[customSvgIcon]stringThe name of the custom svgIcon to be used as the “close” button; otherwise defaults to Material’s “close” iconnull
[acceptedTypes]stringThe list of file types that are allowed to be uploaded“*.*”

@Output() Properties

DirectiveTypeDescription
(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

This awesome script developed by bjsawyer. Visit their official repository for more information and follow for future updates.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About SAROJ MEHER

He is a Lecturer (English & Sociology), a professional Artist, and a blogger. He do paintings, sketches since his childhood. He is in the teaching field for 10 years. In this teaching line, he has experience in teaching English at High School and College levels. He has also experienced teaching computer theory and practicals during the school teaching period. He is in the Blogging field for more than 5 years.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

TRENDING ARTICLES

ARTICLESTRENDING