React Multiple Images Upload with Preview example
Tags: react, javascript, webdev, todayilearned
Published: 2021-01-06 04:19:38

In this React tutorial, I will show you way to build React.js Multiple Images upload example with Preview using Axios and Multipart File for making HTTP requests, Bootstrap for progress bar and display list of images' information (with download url).

Original Full Post: [https://bezkoder.com/react-multiple-image-upload-with-preview/](https://bezkoder.com/react-multiple-image-upload-with-preview/)

<h2>React Multiple Images upload Overview</h2>
We’re gonna create a React.js Multiple Images 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 each image with progress bars</li>
	<li>view all uploaded files</li>
	<li>download link to file when clicking on the file name</li>
</ul>

Here are screenshots of our React App:

- Before upload:

![react-multiple-image-upload-with-preview-before-upload](https://dev-to-uploads.s3.amazonaws.com/i/6yhe12c5yami892quz82.png)

- Upload is done:

![react-multiple-image-upload-with-preview-example](https://dev-to-uploads.s3.amazonaws.com/i/h8nrrks22e7wtnwgwkpt.png)

- List of Images Display with download Urls:

![react-multiple-image-upload-with-preview-list-images](https://dev-to-uploads.s3.amazonaws.com/i/m8yznn4bc0i3mip5r4xw.png)

- Show status for each image upload:

![react-multiple-image-upload-with-preview-status](https://dev-to-uploads.s3.amazonaws.com/i/5220cnrw5s914mm9y5az.png)

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

Here are 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/spring-boot-file-upload/">Spring Boot Multipart File upload (to static folder) example</a>

<h2>Project Structure</h2>
After building the React project is done, the folder structure will look like this:

<img src="https://bezkoder.com/wp-content/uploads/2021/01/react-js-multiple-image-upload-with-preview-example-project-structure.png" alt="react-js-multiple-image-upload-with-preview-example-project-structure" width="260" height="450" class="alignnone size-full wp-image-6592" />

Let me explain it briefly.

- <em>file-upload.service</em> provides methods to save File and get Files using Axios.
- <em>images-upload.component</em> contains upload form for multiple images, preview, progress bar, list of uploaded images display.
- <em>App.js</em> is the container that we embed all React components.

- <em>http-common.js</em> initializes Axios with HTTP base Url and headers.
- We configure port for our App in <em>.env</em>

For more details, implementation and Github, please visit:
[https://bezkoder.com/react-multiple-image-upload-with-preview/](https://bezkoder.com/react-multiple-image-upload-with-preview/)

## Further Reading

- <a href="https://bezkoder.com/react-file-upload-spring-boot/">React File Upload/Download example with Spring Boot Rest Api</a>
- <a href="https://bezkoder.com/react-crud-web-api/">React.js CRUD example to consume Web API</a>
- <a href="https://bezkoder.com/react-jwt-auth/">React JWT Authentication & Authorization (without Redux) example</a>
- <a href="https://bezkoder.com/react-redux-jwt-auth/">React Redux: JWT Authentication & Authorization example</a>