Pasted images upload multiple times from a FilePond in a Vue dialog

[oti169]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

I'm using FilePond 4.30.4.

Images that are pasted upload multiple times under some circumstances.

Reproduction

I have a FilePond in a dialog in a Vue application. When I show the dialog, I can drag and drop images, no worries. I can also paste images copied from another browser page without problems. If I close and then reopen the dialog, I can still drag and drop images OK, but if I paste an image copied from another browser tab, the image uploads twice. If I close and reopen the dialog again, the pasted image uploads three times. Again, no problems with drag and drop.

I got far enough into the code to find that some listeners weren't being removed when the dialog was closed.

Let me know if the above isn't enough to reproduce and I'll see if I can put a sandbox together. It's kinda complex.

The component looks like this:

        <file-pond
          class="fit"
          name="file"
          ref="pond"
          class-name="mvow-pond"
          :label-idle="`${uploadIcon} ${props.uploadPrompt}`"
          :allow-multiple="true"
          :allow-revert="false"
          :allow-file-type-validation="true"
          :accepted-file-types="acceptedFiles"
          :file-validate-type-detect-type="fileValidateTypeDetectType"
          :file-metadata-object="extraFormFields"
          :server="uploadOptions"
          :image-resize-target-width="resizeWidth"
          :image-resize-target-height="resizeHeight"
          image-resize-mode="contain"
          :image-resize-upscale="false"
        >
        </file-pond>

I worked around the problem. When the dialog box is closed, I do this:

    pond.value._pond.destroy()

I tried setting v-if="showDialog" on the FilePond component (same as the dialog component's v-model), but this didn't make a difference.

Thanks for your work, I very much appreciate it.

Environment

- Device: PC
- OS: Linux, Windows 11
- Browser: Chrome, Firefox

[barremob]

I've seen similar issue recently with drag and drop.
Sporadically the same file is added even 10 times or more.
Haven't investigate deeply so far though, but it's not easy to find the issue.
Because it doesn't happen always, sometimes adding 20 times some files it doesn't happen and then when you don't expect it (when your not monitoring...) it happens 🤪

EDIT: Mine is related because the dropOnPage is enabled. If this is disabled the multiple uploads doesn't happen. It also only happens when the filepond is initialized multiple times without refreshing the page. (works with vue, inertiajs)

[gustavoodias-looplex]

I'm having a similar issue with pasted files. Every time I paste any file, the file is uploaded 2 times. I can handle it by using a useState to record the uploaded files and prevent it from being uploaded 2 times. But if I set the allowFileRename prop and a fileRenameFunction the UI becomes terrible because de renaming pop-up shows up 2 times.
I'm using FilePond version 4.30.4. with react.

[rikschennink]

It's important to make sure the FilePond instance is destroyed when it's no longer used.

[gustavoodias-looplex]

@rikschennink I'm trying to destroy the FilePond instance in the return of my useEffect, but I'm getting this error:

filepond.js:1461 Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')
at insertAfter (filepond.js:1461:1)
at Object.restoreElement (filepond.js:12114:1)
at destroy (filepond.js:12647:1)
at eval (filepond.js:3493:1)

My useEffect hook:

  useEffect(() => {
    const input = document.querySelector(`#${id}`)

   const filepondInstance = FilePond.create(input, {
       ...
   })

    return () => {
      filepondInstance.destroy()
    }
  }, [])

When I print a console.log of the FilePond instance before destroying it, I can see the destroy function, but when I call it doesn't work.

[rikschennink]

Is the element still on the page or is it already removed?

[gustavoodias-looplex]

When filepondInstance.destroy() is called, both the input and .filepond--root elements still on the page.

[rikschennink]

It'll try to restore the original input element, it seems the issue originates from this function, perhaps because the input parentNode is gone.
https://github.com/pqina/filepond/blob/master/src/js/app/index.js#L620C17-L620C17

[barremob]

If it helps anyone...

With Vue and Inertia,

the issue I had with the full page drop where the nbr of uploads increased by every page visit.
Was because the registered eventlisteners were not removed (automatically). But the FilePond was created on every page visit.
So with every page change going back to the FilePond component it added 1 to the eventlisteners.

Solved this by doing:

Add ref to FilePond

<FilePond ref="filePondInstance" .... :dropOnElement="false" :dropOnPage="true" />

OnBeforeUnmount set pond to off and destroy:

const filePondInstance = ref(null);

onBeforeUnmount(() => {
    if (filePondInstance.value) {
        const pond = filePondInstance.value._pond;
        if (pond) {
            pond.off();
            pond.destroy();
        }
    }
});