Aborting small files doesn't return server response

[telaak]

Summary

When uploading a small file, aborting it before the uploading animation finishes might have actually already uploaded the file. Since FilePond relies on the server returning the file ID through server.process.onload, the client can't be sure if the upload finished successfully or not.

How to reproduce

Start uploading a small file, cancel it before it "finishes".

Expected behaviour

Upload canceled, no file is uploaded, or at least the server response is fetched somehow.

Additional information

Using react-filepond and multer for processing file uploads.

Environment	Version
OS	Linux / Ubuntu
Device	PC
Browser	Chrome

[rikschennink]

Good catch. This is indeed not working correctly at the moment. If a file has already uploaded it should stop the simulated upload indicator and then follow the revert-upload routine.

[telaak]

As a temporary fix, would it be possible to disable the fake upload indicator and use the original as seen in https://itnext.io/filepond-frontend-trickery-a3073c934c77 ?

[rikschennink]

@telaak At the moment there's no way to disable it, you can of course remove it from the code itself.

[rikschennink]

Just published version 3.1.2, FilePond now calls the revert method if a serverFileId has been found. Please let me know if this fixes the issue.

[telaak]

Problem still persists on filepond@3.1.4. The file goes through even if I abort, which doesn't happen on files that take more than a second to upload.

[rikschennink]

Yes that is because the file is already uploading (it doesn’t wait for the fake uploaded to finish, they run in parallel). If you abort and the file has been uploaded FilePond will call the revert method to remove the file from the server.

[telaak]

Sorry, I worded that wrong. Aborting the file does not call the revert function, or at least my backend does not register any delete requests. Reverting after the FilePond upload indicator has changed to green works fine.

Here's what I'm using:

 "filepond": "^3.1.4",
 "react-filepond": "^5.0.0"

<FilePond ref={ref => { this.pond = ref }}
  allowMultiple={true}
  acceptedFileTypes={['video/mp4', 'video/webm']}
  server={{
    url: 'url'
  }}
  oninit={() => this.handleInit()}
  onupdatefiles={(fileItems) => {
    this.setState({
      files: fileItems.map(fileItem => fileItem.file)
    })
  }}>
  {this.state.files.map(file => (
    <File key={file} src={file} origin="local" />
  ))}
</FilePond>

[rikschennink]

Alright, thanks for clarifying, I will run some additional tests on Monday.

FYI you can set the server URL directly, it doesn't need an object.

[rikschennink]

I've tested the revert function once again but it's doing exactly what it should be doing, see the screen capture below. Maybe you're doing something else?

1. revert when done
2. cancel upload (no revert as the file was not uploaded)
3. abort upload (the file has already uploaded but we're looking at the fake indicator)

[telaak]

I'm getting inconsistent results on my backend, sometimes the abort sends the delete command and sometimes it doesn't. Going to test some more, might just be a backend related issue.

EDIT: Aborting larger (7 MB) files even at >98% stops the upload in time.

[rikschennink]

I'm looking into it.

[rikschennink]

Is the file actually uploaded to the server or is the upload aborted and saved as a zero byte file (that's the result I get when cancelling the upload at the last minute with my test upload script)?

[rikschennink]

Can you check the dev tools network tab to see if your server returns a file id.

[telaak]

The uploaded file is the full file and my server's response does not get logged in the network tab.

[rikschennink]

Then I'm afraid we can't really do anything about it, as the file upload is aborted (status is canceled) but a response is not received FilePond can't know what file to revert.

A possible solution could be to delay an abort call when the upload is at ~99% so it does receive the server file id and can then revert but that feels a bit like a hack as it might differ per file size and upload speed.