React Image Upload With Preview and Progress Bar Tutorial Example

Friends, this is a tutorial about React Image Upload, Preview, Progress Bar. If the user is given the task of a new file loading, then this tutorial will surely demonstrate a practical and realistic solution.

We will learn comprehensively to use drag and drop to upload single and multiple image files in React. We will also get to know how to show the image preview after uploading the file.

In addition, we will see how to create a percentage progress bar to track the progress of loading using the third party react-dropzone-uploader, html5-file-selector, and Bootstrap packages.

Drag and drop offer quite an easy solution for uploading the images and the files. A very common belief about the dropzone is that it elevates the user experience. It becomes an easy and simple task for the user to select, drag and drop the images as well as files.

So, we will learn the following things throughout this guide:

• Creating the react app
• Configuring the react dropzone package
• Creating drag and drop component
• Adding maximum files validation
• Adding custom style to the dropzone module
• Using dropzone properties and methods

How to Upload Image Files, Show Image Preview with Progress Percentage Bar in React

Now, let’s see what we need to do step by step for implementing the above mentioned

 

Installing the New React Project– First of all, we need to create a new React app by using the below-given command. Move onto the next step if you have already done so.

npx create-react-app react-draganddrop-app

Now, we have to get into the project root.

cd react-draganddrop-app

Installing the Bootstrap Package- Installing the Bootstrap Package is optional since we are using Bootstrap CSS for elevating the UI of the image upload module.

npm i bootstrap

 

Adding the React Dropzone Package- The third step is to install the react-dropzone-uploader package in the react app. Also, remember to add the required packages in the file upload component file.

npm i react-dropzone-uploader

 

Installing the HTML File Selector Package- Now, we reach the step of installing the html5 file selector package. It fluently deals with custom input control that handles the files array chosen by the file input control.

npm i html5-file-selector

Creating and Registering File Upload Component- Components are those independent and reusable pieces of code that are used to manage the code persuasively. These are very much similar to programming functions, though they work independently and return HTML through a render () function.

Then is required to create src/components folder, then fileUpload.component.js file within.

After the creation of the new component, we place the following code in the src/components/fileUpload.component.js file.

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

const FileUploadComponent = () => {

};

export default FileUploadComponent;

 

Afterward, we move to the src/App.js file and update the following code into it:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import FileUploadComponent from './components/fileUpload.component';

function App() {
  return (
    <div className="App container mt-5">
      <FileUploadComponent />
    </div>
  );
}

export default App;

Implementing the React Dropzone in React Component- Next step is to integrate the drag and drop image files upload with the image preview feature. Also, we will explain how to create a percentage progress bar and how to blitzkrieg several other functionalities that are necessary and build dropzone’s methods and event handlers.

Add the following code in the src/components/fileUpload.component.js file:

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


const FileUploadComponent = () => {

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

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

    const onSubmit = (files, allFiles) => {
        allFiles.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-danger mt-4">
                {textMsg}
                <input
                    style={{ display: 'none' }}
                    type="file"
                    accept={accept}
                    multiple
                    onChange={e => {
                        getFilesFromEvent(e).then(chosenFiles => {
                            onFiles(chosenFiles)
                        })
                    }}
                />
            </label>
        )
    }

    return (
        <Dropzone
            onSubmit={onSubmit}
            onChangeStatus={onFileChange}
            InputComponent={selectFileInput}
            getUploadParams={fileParams}
            getFilesFromEvent={getFilesFromEvent}
            accept="image/*,audio/*,video/*"
            maxFiles={5}
            inputContent="Drop A File"
            styles={{
                dropzone: { width: 600, height: 400 },
                dropzoneActive: { borderColor: 'green' },
            }}            
        />
    );
};

export default FileUploadComponent;

 

Running the Application- Lastly, we reach the end where we have to run the command and start the app. This helps in checking the nuances in the file upload functionality that we have added in the react app.

npm start

Conclusion

So, we have tried to explain things in a persuasive manner. Hope that you have learned quite well how the React drag and drop library makes file uploading quite simple. One can easily customize the dropzone component in React with the help of React Dropzone Uploader Plugin.

Thanks