File Upload using Material Components in Angular

In this article, we’ll learn how to create file upload using Material Components in Angular. To start implementing File upload first, create a new project in angular for that you need to run the following command to create a project.


ng new fileupload-demo

“fileupload-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd fileupload-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the @angular/material npm package in our application. run below command to install.


npm i @angular/material

we need to install the angular material module in our application run the below command to install the module.


After installing the module lets add a module in our app.module.ts file. We need to import some modules to use our application called Button, Input, TabsModule display in the below code.


......
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatToolbarModule } from '@angular/material/toolbar';
.......
@NgModule({
imports:[ 
..., 
 BrowserAnimationsModule,
  FormsModule,
  MatIconModule,
  MatButtonModule,
  MatToolbarModule,
  MatInputModule,
  MatFormFieldModule,
  MatProgressBarModule
...,   
],
....
})

After adding module you can use in our component. we used “uploadFileEvt()” It’s event fire when any file is uploaded through it. It will sync with FileReader API and browse the files via the input field.
Add below code in our app.component.ts file.


import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  dataimage:any;

   @ViewChild('fileInput') fileInput: ElementRef;
  fileAttr = 'Choose File';


  uploadFileEvt(imgFile: any) {
    if (imgFile.target.files && imgFile.target.files[0]) {
      this.fileAttr = '';
      Array.from(imgFile.target.files).forEach((file: File) => {
        this.fileAttr += file.name ;
      });

      // HTML5 FileReader API
      let reader = new FileReader();
      reader.onload = (e: any) => {
        let image = new Image();
        image.src = e.target.result;
        image.onload = rs => {
          let imgBase64Path = e.target.result;
          console.log(imgBase64Path);
          this.dataimage = imgBase64Path;
        };
      };
      reader.readAsDataURL(imgFile.target.files[0]);
      
      // Reset if duplicate image uploaded again
      this.fileInput.nativeElement.value = "";
    } else {
      this.fileAttr = 'Choose File';
    }
  }
}

After adding code to the component file we need to add the below code in the “app.component.html” file.


<div class="card" >
  <div class="card-header">
    File Upload
  </div>
  <div class="card-body">
    <mat-form-field>
  <div>
    <mat-toolbar>
      <!-- Display files names -->
      <input matInput [(ngModel)]="fileAttr" readonly name="name" />

      <!-- Browse Button -->
      <button mat-flat-button color="primary">
        Browse File
      </button>
    </mat-toolbar>

    <!-- Fetch selected filed on change -->
    <input type="file" #fileInput id="uploadFile" (change)="uploadFileEvt($event)" name="uploadFile" multiple="multiple"
      accept="image/*" />
  </div>
</mat-form-field>
  </div>

  <div class="card-footer">
    <div><img src="{{dataimage}}" width="300px"></div>
  </div>
</div>



Output

Below is the full embeded code for the dynamic tabs add using angular material you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 3
  • 2
  •  
  •