How to build a React drag-and-drop component for file upload

In this article, we’ll build a simple React application for dragging and dropping files. We'll make use of the HTML5 

React comes with a multitude of component libraries that you can use out of the box, but the more dependencies you add to your project, the more likely you are to end up with broken code as time goes by. 

Thus, even if it takes a bit longer, it's always preferable to write your own, non-bloated components, instead of adding dependencies for the smallest tasks. 

In this article, we'll learn how to create our own drag-and-drop component in React, and we'll use the HTML5 native DnD API for this. 

By the end of this tutorial, you should have a good understanding of how the HTML5 

 API works and how to build your own DnD component in React. 

To be able to follow along, you should be familiar with how React hooks and APIs work. If you’re just starting to learn React, it might be better to first check the articles below:

In this tutorial, we'll create a simple React app that allows us to drag and drop files, and lists the file name and thumbnail in the drop area.

Before we dive into the React code, we'll discuss the basics of the HTML5 

I’ll start by explaining how the DnD API works in HTML5. 

In the earlier versions of HTML, creating this behavior required using JS or a framework like jQuery, for faster coding. However, in HTML5, this behavior is native, so you no longer have to find a workaround. All major browsers support DnD, as you can see

The principle behind this behavior is very simple: an element will take on the 

 role, and another element will become the drop target or

So in any drag-and-drop application, you will have these two parts: the element that can be dragged, and the area where it can be dropped. 

HTML5 allows any element to become draggable by simply adding this attribute and setting it to “true”: 

This is how you tell your app that you want to be able to drag a specific DOM element. 

However, making an element draggable isn’t enough; in order to enable the actual behavior, you also need to attach event listeners that tell the app what functions to execute when the element is dragged or dropped. 

For  the draggable element, the available events include: 

On the other hand, for the drop area, you can use the following events: 

How do these work together, in practice? 

First, you make an element draggable. Then, you attach the suitable event listeners to the draggable element. For example: 

<p id="drag-p" draggable="true" ondragstart="drag(event)"></p>;

At this point, if you start dragging the element, the 

 function will be called. Here’s how this function could look: 

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

 property holds the event’s data and comes with specific methods for managing the dragged data. The method used above, 

, is used for adding an item to the dragged data. 

You can use different types of data here, such as: 

The value of the dragged data is defined by the 

Once you drag an element, you want to be able to drop it as well, so you need an area where you can drop it. To define a drop zone, you have to use the 

<div
  id="div1"
  ondrop="drop(event)"
  ondragover="allowDrop(event)"
></div>;

By default, elements can’t be dropped in other elements, so if we want to drop a paragraph in a div, we need to 

This means that the function called by the 

 event listener will prevent the default behavior, like this: 

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

Just like before, we're preventing the default behavior and mentioning the data type that can be dropped in the drop area. Then, we're telling the app that we want the dragged element to be appended to the drop area, once dropped. 

 hook in React. This hook is an alternative to the 

 hook, and is generally used in applications with complex state.

It takes a reducer function and an initial state as input, and returns the current state and a dispatch function as output. Here's how this looks in practice: 

const [state, dispatch] = useReducer(reducer, initialState);

 function takes two values and returns a single one, as shown below:

So we have an app where the initial count is 0, and we have a reducer that applies an action to this state, to increment or decrement it by 1. This happens when a counter button is pressed.

The full code looks like this, and you can find it 

import React, { useReducer } from "react";
import "./styles.css";

const CounterFct = () => {
  const initialState = {
    count: 0,
  };

  function reducer(state, action) {
    switch (action.type) {
      case "increment":
        return { count: state.count + 1 };
      case "decrement":
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <div>
        <p>{state.count}</p>
        <button onClick={() => dispatch({ type: "increment" })}>
          +1
        </button>
        <button onClick={() => dispatch({ type: "decrement" })}>
          -1
        </button>
      </div>
    </>
  );
};

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

export default App;

 object, so this means that whatever the value of the state was, it will be incremented or decremented by 1. 

 tells the app which function to call and apply when the button is clicked. 

  const [state, dispatch] = useReducer(reducer, initialState);

 dispatches an action that updates the state. The action is the one defined by 

 hook does, and how the HTML5 DnD API works, let's put these together and build our file drag-and-drop app. 

Step-by-step tutorial: building a drag-and-drop React component

We’re ready to build the React drag-and-drop component. To make this easier to digest, I’ll split the tutorial into three parts: 

I’ll be using codesandbox.io for this tutorial, and you can find the 

I have no other dependencies installed, so my project structure looks as follows:

import React from "react";
import "./styles.scss";
function App() {
  return (
    <div className="App">
      <h1>React drag-and-drop component</h1>
      <DragAndDrop />
    </div>
  );
}

export default App;

const DragAndDrop = props => {
  return (
    <div className={"drag-drop-zone"}>
      <p>Drag your files here</p>
    </div>
  );
};

.App {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.drag-drop-zone {
  display: flex;
  justify-content: flex-start;
  width: 50%;
  padding: 2rem;
  background: #f2f2f2;
  border-radius: 0.5rem;

  & .dropped-files {
    font-weight: bold;
  }
}

.drag-drop-zone.inside-drag-area {
  opacity: 0.7;
}

Of course, nothing actually happens at the moment, as there is no draggable file yet. Also, we haven't added any event handler, so the App doesn't know how to handle a file if we try to drop it in the  

So let's start by adding the event handlers mentioned at the beginning of this article. We'll need to tell the app what we want to drag and where we want to drop it. 

We're going to use event listeners similar to the ones mentioned in the first part, except that in React they're written in camelCase. So in your 

For now, we're just preventing the browser from opening the files. We want our events to do the following: 

We'll define these actions inside a reducer function, but before doing so, let's declare the initial state of our application. In the 

const state = {
    inDropZone: false,
    fileList: []
};

So initially, our file list is empty and our draggable files are not in the drop area.

AUTHOR

Andreea Macoveiciuc

In this article, we’ll build a simple React application for dragging and dropping files. We'll make use of the HTML5 drag-and-drop API and we’ll discuss the useReducer hook for managing state.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to build a React drag-and-drop component for file upload

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript