Uppy uploads the original image instead of the edited version

Uppy
1

This is my uppy configuration:

// this is outside component
const uppy = new Uppy({
  allowMultipleUploads: false,
  locale: farsiLocal,
  restrictions: {
    maxFileSize: 10_000_000,
    maxNumberOfFiles: 1,
    allowedFileTypes: ["image/jpeg", "image/png", "image/webp"],
  },
})
  .use(XHRUpload, {
    endpoint: `/image`,
    method: "post",
    formData: true,
    fieldName: "image",
    allowedMetaFields: ["name"],
  });

const Component = () => {
  return (
          <DashboardModal
            open={isFileUploaderOpen}
            onRequestClose={() => setIsFileUploaderOpen(false)}
            uppy={uppy}
            plugins={["ImageEditor"]}
            metaFields={[{ id: "name", name: "name", placeholder: "Name" }]}
            closeModalOnClickOutside={true}
            style={{ zIndex: "999999" }}
          />
  )
}

The problem is, when I edit the image with the ImageEditor plugin and then upload the image, it uploads the original image not the edited one. I can’t find any example that uses react-hooks, your image editor and the upload plugin at the same time so I’m a little confused. Am I missing something here?

2

Hi,

I have the same issue. Do you found a solution?

Best regards,
Christian

3

Hi. Did you try to uppy.use(ImageEdtior,...)? see Image Editor — Uppy

1 Like
4

Thank you. It fixed my issue. I thought adding “ImageEditor” to the list of DashboardModal plugins would automatically register ImageEditor. Seems like it’s not the case.