React.js file upload UI drag and drop not working

Question

I am trying to write a file upload for my react.js app. However, I am not able to get the drag and drop zone to work properly. Even though I stop the propagation and prevent Default on drag and drop events, it still does not work as expected. The browser still opens my files.

export default function DraggableUploader() {

    const fileInput = useRef(null)
    const [loadedFile, setLoadedFile] = useState(null)
    const [isLoading, setIsLoading] = useState(false)

    const handleDragEnter = e => {
        e.preventDefault();
        e.stopPropagation();
      };
    const handleDragLeave = e => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDragOver = e => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDrop = e => {
        e.preventDefault();
        e.stopPropagation();

    };


    function handleSubmit(e) {
        e.preventDefault()
        console.log(`current file`, loadedFile.name)



    }

    return (
        <div className="dropzone">
            <div className="sub-header">Drag your audio file here:</div>
            <div className="draggable-container">
                <input 
                    type="file" 
                    className="file-browser-input"
                    name="file-browser-input"
                    style={{display: "none"}}
                    ref={fileInput} 
                    onDrop={e => handleDrop(e)}
                    onDragOver={e => handleDragOver(e)}
                    onDragEnter={e => handleDragEnter(e)}
                    onDragLeave={e => handleDragLeave(e)}
                    onChange={handleInputChange}  
                />


                <div className="file-browser-container">
                    <Button variant="outline-primary" onClick={handleInputClick}>Browse</Button>

                </div>

            </div>
            <Button variant="primary" onClick={handleSubmit}>Submit</Button>
        </div>
    )
}

Etika49 · Accepted Answer · 2020-06-04 20:40:03Z

3

obviously I did not have a useEffect to add the event listeners.. if you add the below code all works as expected:

useEffect(() => {
        let div = dropRef.current;
        div.addEventListener('dragenter', handleDragEnter);
        div.addEventListener('dragleave', handleDragLeave);
        div.addEventListener('dragover', handleDragOver);
        div.addEventListener('drop', handleDrop);
        return function cleanup() {
          div.removeEventListener('dragenter', handleDragEnter);
          div.removeEventListener('dragleave', handleDragLeave);
          div.removeEventListener('dragover', handleDragOver);
          div.removeEventListener('drop', handleDrop);
        };
      });

answered Jun 4, 2020 at 20:40

Etika49

7501 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Sahni · Accepted Answer · 2020-06-04 21:15:12Z

1

You don't need to attach event listeners if you are using the arrow function. Use the below code all events will work the only problem I saw in your above code was you attached events on a hidden input attach events to the outer most div it will work. Good Luck!

export default function App() {

  const handleDragEnter = e => {
    e.preventDefault();
    console.log("drag enter");
  };

  const handleDragLeave = e => {
    e.preventDefault();
    console.log("drag leave");
  };

  const handleDragOver = e => {
    e.preventDefault();
    console.log("drag over");
  };

  const handleDrop = e => {
    e.preventDefault();
    console.log("drag drop");
  };

  const handleInputChange = () => {};

  return (
    <div
      className="dropzone"
      onDrop={e => handleDrop(e)}
      onDragOver={e => handleDragOver(e)}
      onDragEnter={e => handleDragEnter(e)}
      onDragLeave={e => handleDragLeave(e)}
      onChange={handleInputChange}
    >
      <div className="sub-header">Drag your audio file here:</div>
      <div className="draggable-container">
        <input
          type="file"
          className="file-browser-input"
          name="file-browser-input"
          style={{ display: "none" }}
        />
      </div>
    </div>
  );
}

answered Jun 4, 2020 at 21:15

Rahul Sahni

1091 silver badge9 bronze badges

1 Comment

Etika49 Over a year ago

you are right. this does work. Maybe this ref in the hidden fields was actually the problem. i will do some more testing

Collectives™ on Stack Overflow

React.js file upload UI drag and drop not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related