Filepond is there a way to send revert when large chunked file is canceled mid upload?

Viewed 219

The revert request is only sent when the file is uploaded completely.

I want to send the revert request if the user cancels the file while it's still uploading.

File still Uploading Image

The Folder ID is returned from first POST request so we have the Folder ID.

I have looked through documentations and GitHub and found this GitHub pull 757 but don't know how to do it.

Everything works I just want to send the revert when the user cancels.

Here is my code

<input type="file" name="files" id="files" multiple>
<script>
    FilePond.create(document.getElementById("files"), {
        name: 'files',
        allowMultiple: true,
        chunkUploads: true,
        chunkSize: 1024 * 1024 * 50, // 50MB
        chunkRetryDelays: [],
        maxFileSize: 1024 * 1024 * 1024, // 1 GB
        server: {
            url: '{{ url('upload') }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            }
        }
    });
</script>
1 Answers

You can use the FilePond:process-file.abort event to detect when a file upload is aborted. This event is fired whenever the file is removed before it has finished uploading.

You can then call the FilePond.revert(id) method to revert the file upload.

Here is an example:

FilePond.create(document.getElementById("files"), {
    name: 'files',
    allowMultiple: true,
    chunkUploads: true,
    chunkSize: 1024 * 1024 * 50, // 50MB
    chunkRetryDelays: [],
    maxFileSize: 1024 * 1024 * 1024, // 1 GB
    server: {
        url: '{{ url('upload') }}',
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        }
    }
});

FilePond.setOptions({
    server: {
        revert: (uniqueFileId, load, error) => {
            // make request to revert the file upload here
            // once done, call load() or error()
        }
    }
});

Alternatively, you could also use the FilePond:process-file.remove event. This event is fired whenever a file is removed, whether it has finished uploading or not. You can then call the FilePond.revert(id) method to revert the file upload.

documentation: https://pqina.nl/filepond/docs/patterns/api/server/#revert

Related