TTC
Theo's Typesafe Cult•2y ago
cement4357

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

Did you find this page helpful?