onDrop method not being called after selecting a file.

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?

When I click the dropzone, the file dialog opens. I select a file either by double clicking or clicking the upload button on the dialog. The dialog dismisses.

About 80% of the time, nothing happens. The onDrop method is not called. The remaining 20% of the time, it works as normal.

File is a valid filetype/size and I see no errors on my console.

If I drag and drop a file from Finder, it consistently works as expected - I’ve only encountered this when selecting from a dialog.

What is the expected behavior?

handleDrop gets called consistently and I’m able to upload my file.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

• My implementation seemingly mirrors the documentation, and I’m using the latest version.
• My browser is Safari 15, public release version, and I’ve reproduced this using both Big Sur and the Monterrey beta.
• I have not encountered this issue with other versions of Safari.

[jaffemd]

Hi! I just ran into the same issue and I think I finally isolated what’s causing it. It is only happening on Safari for me, Chrome and Firefox function as expected. Versions: react-dropzone: 12.0.2 Safari: Version 15.3 (16612.4.9.1.7, 16612) macOS Big Sur 11.6

The issue seems to be when trying to assign a custom input id for the file input. With this code below, I’m only seeing the onDrop get called around 30% of the time:

import React from 'react';
import { useDropzone } from 'react-dropzone';

export function Uploader() {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => console.log('acceptedFiles', acceptedFiles),
  });

  return (
    <div
      {...getRootProps()}
    >
      <label htmlFor="input-id">
        Input Label
      </label>
      <input {...getInputProps({ id: 'input-id' })} />
    </div>
  );
}

With this code below, it gets called 100% of the time:

import React from 'react';
import { useDropzone } from 'react-dropzone';

export function Uploader() {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => console.log('acceptedFiles', acceptedFiles),
  });

  return (
    <div
      {...getRootProps()}
    >
      <label htmlFor="input-id">
        Input Label
      </label>
      <input {...getInputProps()} />
    </div>
  );
}

Is there a better way to be able to assign a custom id to the file input? I haven’t seen anything related to this in the docs. Thanks!

Update: Removing the custom id entirely and nesting the input in the label also seems to have the same issue somehow:

<label>
  Input Label
  <input {...getInputProps()} />
</label>

[meetdheeraj]

For me, this isn’t working even for the first time. I’m using React 17+

import Dropzone, { useDropzone } from 'react-dropzone';
...
<Dropzone
              onDrop={(acceptedFiles, fileRejections, event) =>
                console.log('***************', acceptedFiles, fileRejections, event)
              }
              onDropRejected={lol => console.log('##########3', lol)}
            >
              {({ getRootProps, getInputProps }) => (
                <section className="container">
                  <div {...getRootProps()}>
                    <input {...getInputProps()} />

                    <div className={styles.assemblyUploadFormRow}>
                      <div className={styles.dropzoneArea}>
                        <IconButton
                          ariaLabel="file upload"
                          iconProps={{
                            iconName: FluentIconName.CloudUpload,
                          }}
                        />
                        Drag n drop some files here, or click to select files
                      </div>
                    </div>
                  </div>
                </section>
              )}
            </Dropzone>

Those consoles never get printed. On click, I do get file uploader but on selection, nothing happens in the console. Same for drag and drop.