Angular Material 12 Multiple Images upload with Preview example
Tags: angular, javascript, webdev, todayilearned
Published: 2021-06-30 03:47:16

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/](https://bezkoder.com/angular-material-12-image-upload-preview/)

<h2>Overview</h2>
We will create an Angular Material 12 (Multiple) Image upload with Preview application in that user can:
<ul>
	<li>see the preview of images that will be uploaded</li>
	<li>see the upload process (percentage) of all uploading images</li>
	<li>view all uploaded images</li>
	<li>download image by clicking on the file name</li>
</ul>

Here are screenshots of our React App:

- Before upload:

![angular-material-12-image-upload-preview-example-before-upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xymxo783sl4zkgq6mivr.png)

- When Upload is done:

![angular-material-12-image-upload-preview-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qncnt9mwbwp3gbqrbb1w.png)

- List of Images Display with download Urls:

![angular-material-12-image-upload-preview-example-image-list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jfqwk1g6yq3oov0v4s5.png)

- Show status for each image upload:

![angular-material-12-image-upload-preview-example-upload-status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ppxuuj7bad4ezebmc4.png)

<h2>Technology</h2>
<ul>
	<li>Angular 12</li>
	<li>RxJS 6</li>
	<li>Angular Material 12</li>
</ul>

<h2>Web API for Image Upload & Storage</h2>

Here are Rest APIs that we will use Axios to make HTTP requests:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/upload</td>
<td>upload a File</td>
</tr>
<tr>
<td>GET</td>
<td>/files</td>
<td>get List of Files (name & url)</td>
</tr>
<tr>
<td>GET</td>
<td>/files/[filename]</td>
<td>download a File</td>
</tr>
</tbody>
</table>
</div>

You can find how to implement the Rest APIs Server at one of following posts:
- <a href="https://bezkoder.com/node-js-express-file-upload/">Node.js Express File Upload Rest API example</a>
- <a href="https://bezkoder.com/google-cloud-storage-nodejs-upload-file/">Node.js Express File Upload to Google Cloud Storage example</a>
- <a href="https://bezkoder.com/spring-boot-file-upload/">Spring Boot Multipart File upload (to static folder) example</a>

<h2>Angular Material 12 App for Image upload with Preview</h2>
![angular-material-12-image-upload-preview-example-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/envb3ym6bimvqhjouchn.png)

Let me explain it briefly.

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

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

## Further Reading
More Practice:
- <a href="https://bezkoder.com/angular-12-spring-boot-file-upload/">Angular 12 + Spring Boot: File upload example</a>
- <a href="https://bezkoder.com/angular-12-node-js-file-upload/">Angular 12 + Node.js: File Upload example</a>
- <a href="https://bezkoder.com/angular-12-jwt-auth/">Angular 12 Login and Registration example with JWT & Web Api</a>
- <a href="https://bezkoder.com/angular-12-crud-app/">Angular 12 CRUD Application example with Web API</a>
- <a href="https://bezkoder.com/angular-12-form-validation/">Angular 12 Form Validation example (Reactive Forms)</a>
- Using Bootstrap: <a href="https://bezkoder.com/angular-12-multiple-image-upload-preview/">Angular 12 Multiple Images Upload with Preview example</a>

Serverless with Firebase:
<a href="https://bezkoder.com/angular-12-file-upload-firebase-storage/">Angular 12 Upload File to Firebase Storage example</a>