Theo's Typesafe Cult•2y ago

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?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

UploadDropzone - dragging items from the same page