Tien NguyenIn 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/
Overview
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
Technology
- React 16/17
- Axios 0.21.1
- Bootstrap 4
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 upload/download Image with preview
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:
https://bezkoder.com/react-image-upload-preview/
Further Reading
- React Multiple Files upload example with Progress Bar
- React.js CRUD example to consume Web API
- React JWT Authentication (without Redux) example
- React + Redux: JWT Authentication example
