In this tutorial, I will show you way to build Material UI Image Upload example with Preview to Rest API. The React App uses Axios and Multipart File for making HTTP requests, Material UI for progress bar and other UI components. You also have a display list of images’ information (with download url).

Full Article: Material UI Image Upload example with Preview, Axios & Progress Bar

More Practice:

• React Material UI examples with a CRUD Application
• React JWT Authentication (without Redux) example
• React + Redux: JWT Authentication example

Overview

We're gonna create a React Material UI Image upload application in that user can:

• display the preview of image before uploading
• see the upload process (percentage) with progress bar
• view all uploaded images
• link to download the image when clicking on the file name

Technology

• React 16/17
• Axios 0.21.1
• Material UI 4.11.3

Rest API for File Upload & Storage

Here is the API that our React App will work with:

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

• Node.js Express File Upload Rest API example
• Spring Boot Multipart File upload (to static folder) example

Or: Spring Boot Multipart File upload (to database) example

React App for Material UI upload Images

After building the React project is done, the folder structure will look like this:

Let me explain it briefly.

• upload-images.service provides methods to upload Image and get Files using Axios.

• upload-files.component contains Material UI upload form, progress bar, display of list images with download url.

• App.js is the container that we embed all React components.

• We customize styles in App.css.

• http-common.js initializes Axios with HTTP base Url and headers.

• We configure port for our App in .env

For more details, please visit:
Material UI Image Upload example with Preview, Axios & Progress Bar

#react #javascript #web-development #material-ui #file #upload