How to send DELETE request in jQuery/JS when the library itself uses POST?

Question

I'm using Kartik-v/file-input or known as Boostrap File Input, and want to delete uploaded images.

From the docs, I've provided the delete URLs for the images stored on the server. Which these delete URLs are API, and accepting DELETE request. However, the url is sending POST request, which then my Laravel throws an exception that says:

The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE..

How can I work around on this? How can I make the url: will send DELETE request instead of POST?

$('.uploaded-images').fileinput({
        browseLabel: 'Browse',
        browseIcon: '<i class="icon-file-plus mr-2"></i>',
        uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
        initialPreview: [
            'image/an-example-image.png',
            'image/an-example-image2.png',
        ],
        initialPreviewConfig: [
            {caption: 'Jane.jpg', key: 1, url: 'http://web.com/api/medias/14', showDrag: false},
            {caption: 'Anna.jpg', key: 2, url: '{$url}', showDrag: false}
        ],
        initialPreviewAsData: true,
        overwriteInitial: false,
        maxFileSize: 1000,
    });

Answer 1

Judging by the source of the library and its docs. You can supply the request method as jquery ajax option to its option: ajaxDeleteSettings. Example

$('.uploaded-images').fileinput({
    browseLabel: 'Browse',
    browseIcon: '<i class="icon-file-plus mr-2"></i>',
    uploadIcon: '<i class="icon-file-upload2 mr-2"></i>',
    initialPreview: [
        'image/an-example-image.png',
        'image/an-example-image2.png',
    ],
    initialPreviewConfig: [
        {caption: 'Jane.jpg', key: 1, url: 'http://web.com/api/medias/14', showDrag: false},
        {caption: 'Anna.jpg', key: 2, url: '{$url}', showDrag: false}
    ],
    initialPreviewAsData: true,
    overwriteInitial: false,
    maxFileSize: 1000,
    ajaxDeleteSettings: {
        type: 'DELETE' // This should override the ajax as $.ajax({ type: 'DELETE' })
    }
});

You can also define the option globally somewhere before defining above snippet.

$.fn.fileinput.defaults.ajaxDeleteSettings = {
    type: 'DELETE'
}; 

Answer 2

Try including the below hidden input field in your form, and send the request, while your form's submit type is POST

<input type="hidden" name="_method" value="delete" />

Answer 3

The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE.

Laravel needs extra info added to their forms to properly send DELETE requests.

If you're using Blade templates, then it would look something like:

{{ Form::open(['url' => 'foo/bar', 'method' => 'delete', 'class' => 'deleteForm']) }}
  <input type="submit" class="deleteBtn" />
{{ Form::close() }}

If you're not using Blade templates, then add one of the following right after declaring your form (in HTML):

{{ Form::hidden('_method', 'DELETE') }}

or

{{ method_field('DELETE') }}

You can look more into DELETE requests in laravel here, and here

I also saw your comment mentioning that:

I'm using that kartik-v/file-input plugin and it provide delete button

I've never used the plugin before; but maybe you can edit/modify the button to properly send the DELETE request by encapsulating the button in a form?

For example:

<form method="POST" action="/admin/users/{{$user->id}}">
        {{ csrf_field() }}
        {{ method_field('DELETE') }}

        <-- Your Delete Button/Input field Here -->
</form>