React Image Upload with Preview example

Tien Nguyen - Dec 29 '20 - - Dev Community

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/

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

react-image-upload-with-preview-example

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:

react-image-upload-with-preview-example-project-structure

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .