Cannot remove the correct file when duplicated file is uploaded.

[ryanzzeng]

Describe the bug

When uploaded the same file twice(e.g. test.pdf), it will show 2 files at the frontend, But if i manually trigger the removeFile() function, only the first one will send an api request to the backend to delete the file, is it possible to specify the serverId and use removeFile(serverId) to delete the actual file ?

To Reproduce

<file-pond
      ref="filePond"
      name="file"
      :server="server"
      allow-multiple="true"
      :files="files"
      @processfile="handleProcessFile"
      @removefile="handleRemoveFile"
    />

function handleProcessFile(). //this is working well

function handleRemoveFile(). //this is working well

function removeFile(index) {. // UI will pass the index to this function , and manually trigger removeFile
if (this.$refs.filePond) {
const allFiles = (this.$refs.filePond as VueFilePondComponent).getFiles();
(this.$refs.filePond as VueFilePondComponent).removeFile(allFiles[index], { revert: true });
}
}

Everytime i need to use getFiles() and use the index to locate the file , and removeFile(allFiles[index), is it possible to use the serverId to trigger DELETE api?

[rikschennink]

https://pqina.nl/filepond/docs/api/instance/methods/#removing-files

// removes the first file item
pond.removeFile();

// removes the file item at index 1
pond.removeFile(1);

// removes the file item with the given id
pond.removeFile('imzsdvxar');

[ryanzzeng]

hi @rikschennink , it works with the new uploaded file, but not with the existing uploaded files. Even if i try to filter the exisiting file from getFiles() method, it still do not send the DELETE api request.

const allFiles = (this.$refs.filePond as VueFilePondComponent).getFiles();
cost fileIndex = allFiles.filter(/** get the index from all files**/);

(this.$refs.filePond as VueFilePondComponent).removeFile(fileIndex);  // do not send any api request

[rikschennink]

I think this is a question for StackOverflow. It seems very dependent on your project setup. Please post it there and supply a codesandbox.io test case.