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'
};