File Drag And Drop Feature In ReactJS

Introduction

In this article, I am going to explain how to implement the file drag and drop feature in ReactJS.

Drag and Drop Events

The below events are important to implement the file drag and drop feature and belong to the target element (drop area).

• onDrop
• onDragEnter
• onDragLeave
• onDragOver

onDrop

The event is fired when the user releases the mouse button while dropping the dragged item in the drop area. 

onDragEnter

The event is fired when the dragged item is entered into the drop area.

onDragLeave

The event is fired when the user moves the mouse pointer out of the element.

onDragOver

The event is fired when the dragged element is over the drop area. The event is fired periodically while the mouse pointer is over the drop area. While dragging an element, the onDragOver event fires every 350 milliseconds.

We have to call the event.preventDefault() in each of the listeners for these events to avoid opening the file by the browser. event.preventDefault() sending files to the "onDrop" event handler and prevent the opening file by the browser.

import { useState } from "react";
import "./App.css";
function App() {
  const [files, setFiles] = useState([]);
  function overrideEventDefaults(event) {
    event.preventDefault();
    event.stopPropagation();
  };
  function handleDragAndDropFiles(event) {
    overrideEventDefaults(event);
    if (!event.dataTransfer) return;
    handleFiles(event.dataTransfer.files);
  }
  const handleFiles = (fileList) => {
    if (fileList) {
      let files = Array.from(fileList);
      setFiles(files);
      console.log(files);
    }
  };

  return (
    <>
      {
        files.length > 0 ?
          <span className="content">{"No. of files to be uploaded : " + files.length}</span>
          :
          <div
            id ="dragAndDropContainer"
            className="dragAndDropContainer"
            onDrop={overrideEventDefaults}
            onDragEnter={overrideEventDefaults}
            onDragLeave={overrideEventDefaults}
            onDragOver={overrideEventDefaults}
          >
            <div
              id ="dragAndDropArea"
              className="dragAndDropArea"
              onDrop={handleDragAndDropFiles}
              onDragEnter={overrideEventDefaults}
              onDragLeave={overrideEventDefaults}
              onDragOver={overrideEventDefaults}
            >
              <label className="info dragText">
                Drag &amp; Drop to upload
              </label>
            </div>
          </div>
      }
    </>
  );
}
export default App;

In the above code, 

1. There are two "div" elements. One is for container (id ="dragAndDropContainer") and another one is for the drop area (id ="dragAndDropArea"). 
2. Prevent the default behavior (open the file) of the element by event.preventDefault() in both drop area and the container's all drag and drop events.
3. Implement the reading files logic in the drop area's "onDrop" event handler. 
4. Access the dragged data (files) using "dataTransfer" object. i.e We can read the files by "event.dataTransfer.files" in "onDrop" event handler.
5. In this example, once you have dropped the files into the drop area then just read the files and store them into the local state, and display the number of files that has dropped.

Hope you liked it. If you have any doubts or comments about this, please let me know in the comments.