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

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).

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

For instruction, please visit:

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

Rest APIs server for this React Client:

Node.js Express File Upload Rest API example

Spring Boot Multipart File upload example

More Practice:

React Material UI examples with a CRUD Application

React Pagination with API using Material-UI

React File Upload with Axios & Boostrap Progress Bar

React (with Hooks) File Upload with Axios & Boostrap Progress Bar

React JWT Authentication & Authorization example

React + Redux: JWT Authentication & Authorization example

Fullstack CRUD

With Node.js Express:

React.js + Node.js Express + MySQL

React.js + Node.js Express + PostgreSQL

React.js + Node.js Express + MongoDB

With Spring Boot:

React.js + Spring Boot + MySQL

React.js + Spring Boot + PostgreSQL

React.js + Spring Boot + MongoDB

With Django:

React.js + Django Rest Framework

Serverless

React Firebase CRUD App with Realtime Database

React Firestore CRUD App example | Firebase Cloud Firestore

This project was bootstrapped with Create React App.

Set port

.env

PORT=8081

Project setup

In the project directory, you can run:

npm install
# or
yarn install

or

Compiles and hot-reloads for development

npm start
# or
yarn start

Open http://localhost:8081 to view it in the browser.

The page will reload if you make edits.