[Bug] State update in onremovefile event handler triggers file re-upload

[IvoLeist]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated React FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

Hello I am sorry for the double post, but I realized that the issue first described here: pqina/filepond#950 is probably a React specific.

Here a short summary:
I realized some odd behaviour which only happens on the live environment
https://convert-pheno.cnag.cat/, a React application built with Vite and served by nginx

The code snippet below supposed to remove a file from the uploaded files state, causes an unwanted re-triggering of the file upload.

onremovefile={(_, file) => {
   setFilesUploadFinished(false);
   const fileName = file.filename;

   // only update state if the file processing was finished (status 2 = IDLE)
   // for reference see
   // github.com/pqina/filepond-docs/blob/master/content/patterns/API/filepond-object.md#filestatus-enum
   // if below is commented out it is working on the live environment
       if (
             file.status === 2 &&
             file.getMetadata("processingAborted") !== true
       ) {
        setUploadedFiles((prev) => {
          const prevCopy = { ...prev };
          delete prevCopy[fileName];
          return prevCopy;
        });
     }
}}

Reproduction

I am not sure how to reproduce it since I guess you would need a server to show it. But if you are motivated you could fork our repo and then run the server/client with docker-compose up.

Here is a gif of the unexpected behaviour

Environment

- Device: Any
- OS:Any
- Broser: Any
- React version: 18.2

[eywolfe]

I ran into this same issue, though I see it locally as well. As a workaround I had my remove function immediately call load() to remove the file from Filepond state then handled the actual server deletion in onremovefile. This isn't ideal because the user won't see if the deletion fails, but at least it doesn't re-upload the file anymore!

Something like:

<FilePond
      files={files}
      server={{
        ...,
        remove: (_source, load) => {
          console.log("removing file", _source)
          // Called when a file saved in our database is deleted by the user
          // Immediately remove the file from state by calling load()
          // Rely on onremovefile to call provided update function
          load()
        },
      }}
      onremovefile={(_error, removedFile) => {
        console.log("onremovefile", removedFile.source)
        // Called after remove when a saved file is deleted
        // files state has already been updated
        if (typeof removedFile?.source === "string") {
          removeSourceFromExistingFiles(removedFile.source)
        }
      }}
/>

and removeSourceFromExistingFiles is something like this (I'm using react hook form to manage my file state):

const removeSourceFromExistingFiles = (source) => {
  const deletedId = initialFileMap[source]?.id
  setValue(
    "existingFileIds",
    watch("existingFileIds").filter((id) => id !== deletedId),
  )
}