Material UI File Upload example

In this tutorial, I will show you way to build Material UI File Upload example with 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 files’ information (with download url).

Overview

We’re gonna create a Material UI File upload application in that user can:

• see the upload process (percentage) with progress bar
• view all uploaded files
• link to download the file when clicking on the file name

Technology

• React 17
• Axios 0.21.0
• Material UI 4.11.1

Rest API for File Upload & Storage

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

• 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:

• 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 Files

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

Let me explain it briefly.

• upload-files.service provides methods to save File and get Files using Axios.
• upload-files.component contains Material UI upload form, progress bar, display of list files with download url.

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

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

• We configure port for our App in .env

For more details and Github Source code, please visit:
https://bezkoder.com/material-ui-file-upload/