UploadDropzone - dragging items from the same page

Salut fellas,

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

What I am trying to achieve:

Load image dynamically from provided url to image component
Perform some actions on the image, return blob and update image source
Drag and drop processed image to UploadDropzone component (it works on Safari, but not on other browsers - funny thing)

Here are my code snippets:

Image component

<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
/>

<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
/>

UploadDropzone component

<UploadDropzone
  endpoint="imageUploader"
  onClientUploadComplete={(res) => {
    SuccessToast('Image uploaded sucessfully');
    setValue('image', res.fileUrl);
  }}
  onUploadError={(error: Error) => {
    ErrorToast(`${error.message}`);
  }}
/>

<UploadDropzone
  endpoint="imageUploader"
  onClientUploadComplete={(res) => {
    SuccessToast('Image uploaded sucessfully');
    setValue('image', res.fileUrl);
  }}
  onUploadError={(error: Error) => {
    ErrorToast(`${error.message}`);
  }}
/>

I tried to debug DragEvents, but the thing is that everytime I am grabbing image, it doesn't appear to load to dataTransfer items/files property.

Any ideas?

No replies yetBe the first to reply to this messageJoin