Dragging dynamically loaded image to dropzone on the same page does nothing, dataTransfer files array is empty

[chrxmvtik]

Salut fellas,

Recently I go into react-dropzone and I wanted to test it out, however, in my scenario it doesn't really work everywhere.

This is my image component, its source is being loaded when I type url in the form - it loads fine.

<img
  id="image-preview"
  src={imageWatcher}
  width={230}
  height={230}
  className="p-3 px-5 py-2.5 mr-2 mb-2"
  alt={imageWatcher}
  draggable
  onDragStart={(e) => handleDragStartEvent(e, 'image-preview')}
/>

Then right next to it I have dropzone component

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

When I drag image from my filesystem to browser onto Dropzone component - it works great.

However when I try to grab dynamically loaded image ('image-preview'), then no files are being transfered to dropzone component - it works only using Safari, when using Edge or Chrome, it doesn't work.

Any ideas?

[johncalvinroberts]

I've also ran into this same issue. Did you find a solution eventually @chrxmvtik ?