Uppy uploads the original image instead of the edited version

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 (
            onRequestClose={() => setIsFileUploaderOpen(false)}
            metaFields={[{ id: "name", name: "name", placeholder: "Name" }]}
            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?


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

Best regards,

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

1 Like

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.