DEV Community

loading...
Cover image for Angular Material 12 Multiple Images upload with Preview example

Angular Material 12 Multiple Images upload with Preview example

Tien Nguyen
BezKoder.com
Updated on ・3 min read

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

Discussion (0)