I just started working on this project for one of my professors. The feature I got asked to fix allows user to upload an image on our online dashboard, the image then gets uploaded to an S3 bucket with an ID that ties the image to an entry in our DB.

Right now uploading the initial image works, but won't allow the user to upload a different picture to change the image associated with the DB entry. When I upload a new image in the dashboard the new image gets uploaded to S3, but the original image gets reuploaded after and overrides the new image.

Here are some code snippets related to the uppy dashboard used.

The instantiation of uppy:

const uppy = new Uppy({
    restrictions: {
      maxFileSize: 500000000,
      maxNumberOfFiles: 1,
      minNumberOfFiles: 1,
      allowedFileTypes: ["image/*"],
      debug: true,
    },
  })
    .use(ThumbnailGenerator, {
      thumbnailWidth: 300,
    })
    .use(AwsAmplify, {
      storage: Storage,
      limit: 50,
      id: data.id,
      putOptions: {
        bucket: "bucket-name",
      },
      getOptions: {
        download: false,
        bucket: "bucket-name",
      },
    });

The generation of the original image's thumbnail:

useLayoutEffect(() => {
    const setImage = async () => {
      if (isExpanded && uppy.getFiles().length === 0 && editMode) {
        try {
          console.log("in try");
          const { ContentType, Body } = await Storage.get(data.id, {
            bucket: "bucket-name",
            level: "public",
            download: true,
          });
          const fileID = uppy.addFile({
            name: "",
            type: ContentType,
            data: Body,
            source: "Local",
            isRemote: false,
          });

          const uppyFile = uppy.getFile(fileID);

          uppy.emit("upload-started", uppyFile);
          uppy.emit("upload-progress", uppyFile, {
            bytesUploaded: Body.size,
            bytesTotal: Body.size,
          });
          uppy.emit("upload-success", uppyFile, "success");
        } catch {}
      }
    };
    setImage();
  }, [isExpanded, data.id, uppy]);

The uploading of the new image:

  useEffect(() => {
    uppy.on("upload-error", (file, error, response) => {
      console.error("Upload error:", error, response);
    });
    uppy.on("complete", async (file, response) => {
      try{
        if(editMode){
          console.log(data.id);
          const uppyFiles = uppy.getFiles();
          console.log(uppyFiles);
          const result = await Storage.put(data.id, uppyFiles[0].data, {
            bucket: "bucket-name",
            level: "public",
            contentType: uppyFiles[0].type,
          });
          console.log("Upload success:", result);
          console.log(uppy.getFiles());
        }
      } catch (e) {
        console.error(e);
      }
    });
    return () => {
      uppy.off('upload-error');
      uppy.off('complete');
    };
  }, [uppy]);

I have tried having the new images uploaded under a different id to better understand what is happening, and the new image gets uploaded, then the original one gets reuploaded afterwards. I have also tried removing the thumbnail generation, but the behavior of the uploader stays the same.

This feature was set up by a previous student who I have no way of communicating with, and there is very little documentation about using Amplify with uppy. So, I am at a complete loss of what to do to fix a problem like this and any help would be appreciated. Thank you.