Angular Material 12 Multiple Images upload with Preview example

Tien Nguyen - Jun 30 '21 - - Dev Community

In this tutorial, I will show you way to build (Multiple) Image upload and Preview example with Web API/Rest API using Angular Material 12, FormData and Progress Bar.

Full Article: https://bezkoder.com/angular-material-12-image-upload-preview/

Overview

We will create an Angular Material 12 (Multiple) Image upload with Preview application in that user can:

  • see the preview of images that will be uploaded
  • see the upload process (percentage) of all uploading images
  • view all uploaded images
  • download image by clicking on the file name

Here are screenshots of our React App:

  • Before upload:

angular-material-12-image-upload-preview-example-before-upload

  • When Upload is done:

angular-material-12-image-upload-preview-example

  • List of Images Display with download Urls:

angular-material-12-image-upload-preview-example-image-list

  • Show status for each image upload:

angular-material-12-image-upload-preview-example-upload-status

Technology

  • Angular 12
  • RxJS 6
  • Angular Material 12

Web API for Image Upload & Storage

Here are Rest APIs that we will use Axios to make HTTP requests:

Methods Urls Actions
POST /upload upload a File
GET /files get List of Files (name & url)
GET /files/[filename] download a File

You can find how to implement the Rest APIs Server at one of following posts:

Angular Material 12 App for Image upload with Preview

angular-material-12-image-upload-preview-example-project-structure

Let me explain it briefly.

  • We import necessary library, components in app.module.ts.
  • file-upload.service provides methods to save File and get Files from Rest Apis Server.
  • upload-images.component contains upload multiple images form, preview, some progress bars, display list of images.
  • app.component is the container that we embed all components.
  • index.html for importing the Font and Icons.

For more steps and source code, please visit:
https://bezkoder.com/angular-material-12-image-upload-preview/

Further Reading

More Practice:

Serverless with Firebase:
Angular 12 Upload File to Firebase Storage example

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .