React Js Dropzone File Upload with Progress Bar Tutorial

React file upload with progress bar tutorial; This tutorial will help you learn how to create drag and drop file/image upload in React application using the Axios HTTP client.

This tutorial will also show you how to implement a file upload status progress bar in React with Axios and Dropzone JavaScript library.

This React Axios progress bar example will explain how to use react-dropzone-uploader, html5-file-selector and Bootstrap CSS libraries to upload multiple images, show images preview in react before uploading to the server.

React Axios File Upload with Progress Bar Example

  • Step 1: Download React Project
  • Step 2: Add React Dropzone Package
  • Step 3: Install Dropzone Dependency
  • Step 4: Add html5-file-selector Library
  • Step 5: Build Image Upload Component
  • Step 6: Update Component in App Js
  • Step 7: Register Image Component
  • Step 8: Run Development Server

Install New React Project

Move to the command prompt, type the provided command to install the new react application.

npx create-react-app react-demo

In this step, you need to install the Bootstrap CSS library, run the command to add the package to the app.

npm install bootstrap

Add React Dropzone Package

In this step, we have to install the React Dropzone uploader package, which offers file dropzone and uploader for react application.

Now, you can build a file input with a clickable dropzone that accepts image, audio, and video files.

npm install react-dropzone-uploader

Add html5-file-selector Library

In this step, you will be installing html5-file-selector, a wrapper library that offers profound support for handling html5 drag/drop and file input file and folder selections in react.

npm install html5-file-selector

Build Image Upload Component

In this step, you need to create ImageComponent.js in the src/components folder, after which import react dropzone CSS, html5-file-selector and Dropzone.

Create ImageComponent class and export the ImageComponent class.

import React from 'react';

import 'react-dropzone-uploader/dist/styles.css'
import { getDroppedOrSelectedFiles } from 'html5-file-selector';
import Dropzone from 'react-dropzone-uploader'


const ImageComponent = () => {
    
};

export default ImageComponent;

Update ImageComponent in App Js

In this step, you will learn to implement the drag and drop image upload and image preview feature in React application.

Hence, open the src/components/ImageComponent.js and insert the provided code.

import React from 'react';

import 'react-dropzone-uploader/dist/styles.css'
import { getDroppedOrSelectedFiles } from 'html5-file-selector';
import Dropzone from 'react-dropzone-uploader'



const ImageComponent = () => {
    const FilesMeta = ({ meta }) => {
        return { 
            url: 'https://httpbin.org/post' 
        }
    }

    const onChange = ({ meta, file }, status) => { 
        console.log(status, meta, file) 
    }

    const onFilesSubmit = (files, FILES) => {
        FILES.forEach(f => f.remove())
    }

    const getFilesFromEvent = e => {
        return new Promise(resolve => {
            getDroppedOrSelectedFiles(e).then(chosenFiles => {
                resolve(chosenFiles.map(f => f.fileObject))
            })
        })
    }

    const selectFileInput = ({ accept, onFiles, files, getFilesFromEvent }) => {
        const textMsg = files.length > 0 ? 'Upload Again' : 'Select Files'

        return (
            <label className="btn btn-primary mt-3">
                {textMsg}
                <input
                    style={{ display: 'none' }}
                    type="file"
                    accept={accept}
                    multiple
                    onChange={e => {
                        getFilesFromEvent(e).then(chosenFiles => {
                            onFiles(chosenFiles)
                        })
                    }}
                />
            </label>
        )
    }

    return (
        <Dropzone
            onSubmit={onFilesSubmit}
            onChangeStatus={onChange}
            InputComponent={selectFileInput}
            getUploadParams={FilesMeta}
            getFilesFromEvent={getFilesFromEvent}
            inputContent="Drag and Drop Files"
            accept="image/*,audio/*,video/*"
            maxFiles={6}            
            styles={{
                dropzone: { width: 500, height: 300 },
                dropzoneActive: { borderColor: 'red' },
            }}            
        />
    );  
};

export default ImageComponent;

Register Image Component

In this last step, you have to register the image component globally in the src/App.js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import ImageComponent from './components/ImageComponent';

function App() {
  return (
    <div className="App">
      <ImageComponent />
    </div>
  );
}

export default App;

Run React Development Server

We have written the necessary code for this simple functionality, and now you need to run the react app’s development server.

App can be started on the provided url.

npm start
http://localhost:3000

React Js Dropzone File Upload with Progress Bar Tutorial

Summary

In this detailed guide, we help you create an important feature to track file upload progress bar using Axios and rest API; you have also learned how to create a single and multiple files/images upload with the cancel button.

React drag and drop file upload with multiple images preview and percentage progress bars with Rest API example is completed.