React Drag and Drop File Upload example with react-dropzone, Axios & Bootstrap

bezkoder React

In this tutorial, I will show you way to build React.js Drag and Drop File Upload example with Rest API. The React App uses react-dropzone, Axios and Multipart File for making HTTP requests, Bootstrap for progress bar. You also have a display list of files’ information (with download url).

More Practice:
– React Image Upload with Preview example
– React Dropzone example: Multiple Files upload with Progress Bar
– React CRUD example to consume Web API
– React JWT Authentication (without Redux) example
– React + Redux: JWT Authentication example

Using Hooks: Drag and Drop File Upload with React Hooks example


Overview

We’re gonna create a React Drag and Drop File upload application in that user can:

  • drag file and drop it into Drop zone
  • see the upload process (percentage) with progress bar
  • view all uploaded files
  • link to download the file when clicking on the file name

react-drag-and-drop-file-upload-example

Right after drag and drop file into the Dropzone:

react-drag-and-drop-file-upload-example-dropzone

Click on Upload button:

react-drag-and-drop-file-upload-example-progress-bar

Technology

  • React 17/16
  • Axios 0.21.4
  • react-dropzone 11.4.0
  • Bootstrap 4

Rest API for File Upload & Storage

Here is the API that our React App will work with:

Methods Urls Actions
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
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example

Or: Spring Boot Multipart File upload (to database) example

React Drag and Drop File Upload Application

After building the React.js project is done, the folder structure will look like this:

react-drag-and-drop-file-upload-example-project-structure

Let me explain it briefly.

– upload-files.service provides methods to save File and get Files using Axios.
– upload-files.component contains upload dropzone, progress bar, display of list files 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

Setup React Drag and Drop File Upload Project

Open cmd at the folder you want to save Project folder, run command:
npx create-react-app react-file-upload

After the process is done. We create additional folders and files like the following tree:

public
src
components
upload-files.component.js
services
upload-files.service.js
App.css
App.js
index.js
package.json

Import Bootstrap to React File Upload App

Run command: yarn add [email protected]
Or: npm install [email protected].

Open src/App.js and modify the code inside it as following-

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

function App() {
  return (
    ...
  );
}

export default App;

Initialize Axios for React HTTP Client

Let’s install axios with command:
yarn add axios or npm install axios.

Under src folder, we create http-common.js file with following code:

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    "Content-type": "application/json"
  }
});

You can change the baseURL that depends on REST APIs url that your Server configures.

Create Service for File Upload

This service will use Axios to send HTTP requests.
There are 2 functions:

  • upload(file): POST form data with a callback for tracking upload progress
  • getFiles(): GET list of Files’ information

services/upload-files.service.js

import http from "../http-common";

class UploadFilesService {
  upload(file, onUploadProgress) {
    let formData = new FormData();

    formData.append("file", file);

    return http.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
      onUploadProgress,
    });
  }

  getFiles() {
    return http.get("/files");
  }
}

export default new UploadFilesService();

– First we import Axios as http from http-common.js.

– Inside upload() method, we use FormData to store key-value pairs. It helps to build an object which corresponds to HTML form using append() method.

– We pass onUploadProgress to exposes progress events. This progress event are expensive (change detection for each event), so you should only use when you want to monitor it.

– We call Axios post() to send an HTTP POST for uploading a File to Rest APIs Server and get() method for HTTP GET request to retrieve all stored files.

Install react-dropzone

Add react-dropzone module into project with command:
– yarn add react-dropzone
– Or: npm install react-dropzone

Create Component for Drag and Drop File Upload

Let’s create a File Upload UI with Progress Bar, Card, Button and Message.

First we create a React component template, import react-dropzone and UploadFilesService:

components/upload-files.component.js

import React, { Component } from "react";
import Dropzone from "react-dropzone";

import UploadService from "../services/upload-files.service";

export default class UploadFiles extends Component {
  constructor(props) {

  }

  render() {

  }
}

You can simplify import statement with:
Absolute Import in React

Then we define the state inside constructor() method:

export default class UploadFiles extends Component {
  constructor(props) {
    super(props);
    ...

    this.state = {
      selectedFiles: undefined,
      currentFile: undefined,
      progress: 0,
      message: "",

      fileInfos: [],
    };
  }
}

Next we define onDrop() method which helps us to get the selected Files from <Dropzone> element later.

export default class UploadFiles extends Component {
  ...
  onDrop(files) {
    if (files.length > 0) {
      this.setState({ selectedFiles: files });
    }
  }

We use selectedFiles for accessing current File as the first Item. Then we call UploadService.upload() method on the currentFile with a callback. So create following upload() method:

export default class UploadFiles extends Component {
  ...
  upload() {
    let currentFile = this.state.selectedFiles[0];

    this.setState({
      progress: 0,
      currentFile: currentFile,
    });

    UploadService.upload(currentFile, (event) => {
      this.setState({
        progress: Math.round((100 * event.loaded) / event.total),
      });
    })
      .then((response) => {
        this.setState({
          message: response.data.message,
        });
        return UploadService.getFiles();
      })
      .then((files) => {
        this.setState({
          fileInfos: files.data,
        });
      })
      .catch(() => {
        this.setState({
          progress: 0,
          message: "Could not upload the file!",
          currentFile: undefined,
        });
      });

    this.setState({
      selectedFiles: undefined,
    });
  }

}

The progress will be calculated basing on event.loaded and event.total.
If the transmission is done, we call UploadService.getFiles() to get the files’ information and assign the result to fileInfos state, which is an array of {name, url} objects.

We also need to do this work in componentDidMount() method:

export default class UploadFiles extends Component {
  ...
  componentDidMount() {
    UploadService.getFiles().then((response) => {
      this.setState({
        fileInfos: response.data,
      });
    });
  }

Now we implement the render function of the Drag and Drop File Upload UI with Dropzone element. Add the following code inside render():

export default class UploadFiles extends Component {
  ...
  render() {
    const { selectedFiles, currentFile, progress, message, fileInfos } = this.state;

    return (
      <div>
        {currentFile && (
          <div className="progress mb-3">
            <div
              className="progress-bar progress-bar-info progress-bar-striped"
              role="progressbar"
              aria-valuenow={progress}
              aria-valuemin="0"
              aria-valuemax="100"
              style={{ width: progress + "%" }}
            >
              {progress}%
            </div>
          </div>
        )}

        <Dropzone onDrop={this.onDrop} multiple={false}>
          {({ getRootProps, getInputProps }) => (
            <section>
              <div {...getRootProps({ className: "dropzone" })}>
                <input {...getInputProps()} />
                {selectedFiles && selectedFiles[0].name ? (
                  <div className="selected-file">
                    {selectedFiles && selectedFiles[0].name}
                  </div>
                ) : (
                  "Drag and drop file here, or click to select file"
                )}
              </div>
              <aside className="selected-file-wrapper">
                <button
                  className="btn btn-success"
                  disabled={!selectedFiles}
                  onClick={this.upload}
                >
                  Upload
                </button>
              </aside>
            </section>
          )}
        </Dropzone>

        <div className="alert alert-light" role="alert">
          {message}
        </div>

        {fileInfos.length > 0 && (
          <div className="card">
            <div className="card-header">List of Files</div>
            <ul className="list-group list-group-flush">
              {fileInfos.map((file, index) => (
                <li className="list-group-item" key={index}>
                  <a href={file.url}>{file.name}</a>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    );
  }
}

In the code above, we use Bootstrap Progress Bar:

  • .progress as a wrapper
  • inner .progress-bar to indicate the progress
  • .progress-bar requires style to set the width by percentage
  • .progress-bar also requires role and some aria attributes to make it accessible
  • label of the progress bar is the text within it

To display List of uploaded files, we iterate over fileInfos array using map() function. On each file item, we use file.url as href attribute and file.name for showing text.

CSS style for Dropzone and File

Open App.css and add following styles:

.dropzone {
  text-align: center;
  padding: 30px;
  border: 3px dashed #eeeeee;
  background-color: #fafafa;
  color: #bdbdbd;
  cursor: pointer;
  margin-bottom: 20px;
}

.selected-file-wrapper {
  text-align: center;
}

.selected-file {
  color: #000; 
  font-weight: bold;
}

Add File Upload Component to App Component

Open App.js, import and embed the UploadFiles Component tag.

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

import UploadFiles from "./components/upload-files.component";

function App() {
  return (
    <div className="container" style={{ width: "600px" }}>
      <div style={{ margin: "20px 0" }}>
        <h3>bezkoder.com</h3>
        <h4>React Drag & Drop File Upload example</h4>
      </div>

      <UploadFiles />
    </div>
  );
}

export default App;

Configure Port for React Drag and Drop File Upload App

Because most of HTTP Server use CORS configuration that accepts resource sharing restricted to some sites or ports, you need to configure port for our App.

In project folder, create .env file with following content:

PORT=8081

So our app will run at port 8081.

Run the App

You can find how to implement the Rest APIs Server at one of following posts:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example

Or: Spring Boot Multipart File upload (to database) example

Run this React Drag and Drop File Upload with Axios: npm start.
Open Browser with url http://localhost:8081/ and check the result.

Or run on Stackblitz:

Further Reading

– React Image Upload with Preview example

react-image-upload-with-preview-example

Conclusion

Today we’re learned how to build an example for Drag and Drop File upload using React, React-Dropzone and Axios. We also provide the ability to show list of files, upload progress bar using Bootstrap, and to download file from the server.

Happy Learning! See you again.

Source Code

The source code for the React Client is uploaded to Github.

Multiple Files Upload:
React Dropzone example: Multiple Files upload with ProgressBar

Using Hooks: Drag and Drop File Upload with React Hooks example