In this tutorial, I will show you way to build React.js Image Upload example with Preview to a Rest API. The React App uses Axios and Multipart File for making HTTP requests, Bootstrap for progress bar. You also have a display list of images' information (with download url).
Full Article: https://bezkoder.com/react-image-upload-preview/
We’re gonna create a React Image upload application in that user can:
- see 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
- React 16/17
- Axios 0.21.1
- Bootstrap 4
Here is the API that our React App will work with:
/upload: upload a File
/files: get List of Files (name & url)
/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
After building the React project is done, the folder structure will look like this:
Let me explain it briefly.
- file-upload.service provides methods to save File and get Files using Axios.
- image-upload.component contains upload form, image preview, progress bar, display of list of images 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, implementation and Github, please visit: