Javascript: POST with AJAX instead of FETCH

Question

I use this script to upload a file via browser:

function onSubmit() {
    const url = 'uploadURl';
    fetch(url, {
            method: 'POST',
            body: input.files[0]
        }).then(function(res) {
            console.log(res);
            location.reload();
        })
        .catch(function(err) {
            console.error('Got error:', err);
        });
}

It works fine, but I would like to use $.ajax instead of fetch. How can it be rewritten? In particular, I still did not get how to properly setup the request body for the file.

Update:

If I write:

$.post({
    url: 'uploadUrl',
    { data: input.files[0] }
})
.done(function() {
    console.log('File uploaded');
});

I get: Uncaught SyntaxError: Unexpected token {

Show what you've tried please. https://stackoverflow.com/help/how-to-ask — Randy Casburn, Mar 02 '18 at 23:05
Good - simple change: remove the `{ }` surrounding your `data` property. ( should be `data: input.files[0]` ) — Randy Casburn, Mar 02 '18 at 23:58

score 0 · Answer 1 · answered Mar 02 '18 at 23:14

rewritten to use ajax would look something like this.

 $.post'uploadURI', {data: files.input[0]}, function(data, status) {
     //The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request
   }};

Hope this helps. Ajax is a relatively simple to grasp. A quick look at the docs would probably help as well

Javascript: POST with AJAX instead of FETCH

1 Answers1