DEV Community

loading...
Cover image for React Image Upload with Preview example

React Image Upload with Preview example

tienbku profile image Tien Nguyen Updated on ・2 min read

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

Discussion (0)

pic
Editor guide