react-dropzone: onDrop method not being called after selecting a file.

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>

I seem to be having a similar issue with the same file being uploaded twice, for me using Chrome on Ubuntu. This bug only seems to affect the input mechanism: if I select the same file, using the file chooser, the second time nothing happens. If I try then to drag that same file in my dropzone, while in that state, it works though.

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.

I can confirm this bug still exit with react-dropzone version 14.2.3 on Firefox 112.0.2 (64-bit) on Mac Ventra 13.4 only tested on Mac, the same issue also exit in safari browser too

it only happens when selecting from the file dialog

I also quick tested with Chrome and it seams to work file when selecting from the file dialog

I have fixed the issue in my context by using the first recipe (with the open handler) described here: https://github.com/react-dropzone/react-dropzone/tree/master/examples/file-dialog

Note that it seems to work even when the <input {...getInputProps()} /> is completely outside of the component with the {...getRootProps()}.

Had the same issue as above, picking the same file a second time yielded no change. I switched my wrapper from a <label /> to a <div /> and removed onClick: false, then the file was loading in the second time as expected.

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.

I needed dropzone inside a modal window and seems modal window introduces some issue here. Got it working with noDragEventsBubbling: true, as shown below ,

const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    noDragEventsBubbling: true,
  });
...
<div {...getRootProps()}>
                <input {...getInputProps()} />
....

I’ve experimented the same issue, but when trying to upload twice in a row the same file.

I upload it a first time, it works, the onDrop callback is called. If i upload the same file a second time, it’s not triggered, but if it’s a different file, it will work