ReactJS DropZone browser attempts to open file on drop

Question

Trying to implement the Dropzone component but not have much luck. Am I missing something here?

import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styled from 'styled-components';

export const FilDataForm = (props) => {
    const [files, setFiles] = useState([])
    const getColor = (props) => {
        if (props.isDragAccept) return '#00e676';
        if (props.isDragReject) return '#ff1744';
        if (props.isDragActive) return '#2196f3';
        return '#eeeeee';
    }
    const onDrop = (file) => {
        console.log('HERE!!!!!')
        let nf = files;
        nf.push(file)
        setFiles(nf)
    }
    const Container = styled.div`
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-width: 2px;
        border-radius: 2px;
        border-color: ${props => getColor(props)};
        border-style: dashed;
        background-color: #fafafa;
        color: #bdbdbd;
        outline: none;
        transition: border .24s ease-in-out;
    `
    const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone(onDrop);
    return (
        <div className="modal">
            <div className="dialog" style={{ width: "25%", marginBottom: "50px" }}>
                <div className="header"><h2>File Uploader</h2></div>
                <div className="content">
                    <Container {...getRootProps({ isDragActive, isDragAccept, isDragReject })}>
                        <input {...getInputProps()} />
                        <p>Drag 'n' drop some files here, or click to select files</p>
                    </Container>
                    <div className="grid-container" style={{ marginTop: "20px", height: "250px" }}></div>
                </div>
            </div>
        </div>
    )
}

Dragging the file(s) into the drop area causes the browser to launch a new tab attempting to open the file. Any help is appreciated.

EDIT Clicking in the Dropzone does not open the file dialog either.

Answer 1

You need to prevent the default event.

I'm using Class component based React Dropzone and this is how i have stopped the default event.

{...getRootProps({
                  className: 'dropzone',
                  onDrop: (event) => event.preventDefault(),
                })}

Complete Code

<Dropzone onDrop={ (files) => fileHandling(files) } >
            {({ getRootProps, getInputProps }) => (
              <div
                {...getRootProps({
                  className: 'dropzone',
                  onDrop: (event) => event.preventDefault(),
                })}
                
                style={{ border: '1px solid #707070' }}
              >
                <input {...getInputProps()} />
                <h3  style={{ cursor: 'pointer' }}>
                  Drag &amp; Drop file or click here to Upload
                </h3>
                
              </div>
            )}
          </Dropzone>

Hope it helps