How to send DELETE request with filepond in Laravel?

Question

FilePond can upload files using POST request type so that's fine in Laravel. However, FilePond sends DELETE request when reverting/removing the uploaded file/s. Laravel doesn't support DELETE request directly but rather used a _method field with DELETE value sent as a POST request.

So now I'm making a POST request for a deleting but can't seem to figure out how to add data to my revert request in FilePond. My options looks like so:

FilePond.setOptions({
    server: {
        ...
        revert: {
            url: '/filepond',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf_token
            }
        }
        ...
    }
});

Data required by Laravel (data to be added in the POST request not in the header but in the form data).

'_method': 'DELETE'

score 2 · Answer 1 · answered Jul 23 '22 at 07:49

You don't have to modify the request. The string id is sent as the entire content of the DELETE request.

As example:
In your JS

FilePond.setOptions({
 server: {
    ...
    revert: {
        url: '/delete-tmp-path',
        headers: {
            'X-CSRF-TOKEN': csrf_token
        }
    }
    ...
 }
});

In your route file: (web.php)

Route::delete('delete-tmp-path', 'TmpFileController@destroy');

In TmpFileController.php

...
public function destroy(Request $request) {
  $id = $request->getContent();
  //Proceed to delete by $id
}
...

score 0 · Accepted Answer · answered Jul 27 '19 at 15:56

After hours of research, I still couldn't find a proper solution. This is because Laravel doesn't directly deal with DELETE request but required a field to be passed as _method with DELETE value in it, in a POST request.

FilePound, does support sending POST request but doesn't allow for data to be sent, like the _method field required in this scenario.

My solution was to add a header field (which FilePond supports) and add pass the request type as a header field like so:

FilePond.setOptions({
    server: {
        process: {
            ....
        },
        revert: {
            url: '{{ route('your-route') }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf_token,
                '_method': 'DELETE'
            }
        }
    }
});

Since Laravel can't determine that this is a delete request, it will be processed as POST request and hence you will have to perform as check to see if there is a DELETE field passed in the header, like so:

public function store(Request $request)
{
    if ($request->header("-method") == "DELETE") {
        echo "File deleted";
    } else {
        echo "File uploaded";
    }
}

Relevant Works:

https://github.com/Sopamo/laravel-filepond (uses APIs)
https://github.com/thedevdojo/image-uploads-with-laravel-and-filepond (no option to revert uploads in FilePond Instances)

You can also set a custom method to the `server.revert` property, that would allow you to customise the request however you like. — Rik, Jul 29 '19 at 17:23
Yes, that's true but that doesn't allow for extra data to be sent with the request, for the revert. — ByWaleed, Jul 30 '19 at 06:19
If I was sending the filename as response for succeed upload, how to include in on revert request? — Dendi Handian, Jun 19 '21 at 21:02

How to send DELETE request with filepond in Laravel?

2 Answers2