JQuery submit a file using AJAX where the file is not in a Form

Question

I am creating a modal that can be used in multiple places in my application to upload files, as a result I am not using a <form> because this may be used within an existing form that I don't want to submit.

Please Note: this <input type=file> is not in an html <form>. I tried to post this question, but someone marked it as a duplicate and deleted it, and the 'duplicate' answers were all examples where it used a form. please do not mark this question as a duplicate if the examples use a form.

html

<input type="file" id="CustomerInvoices-${ogoneRef}" name="uploadFileNameForCustomerInvoices">

JavaScript

$('#CustomerInvoices-'+ogoneRef).change(function (e) {
    clickSubmitUploadFiles(e, ogoneRef);
});

I have the following JavaScript function.

function clickSubmitUploadFiles(event, ogoneRef) {
    let files = event.target.files;
    ;[...files].forEach(function (file) {
        let urlString = 'http://localhost:8085/papertrail/upload-document/'+userName+'/'+ogoneRef;

        $.ajax({
            type: "POST",
            url: urlString,
            headers: {
                "Authorization": "Basic " + btoa(username+":"+password)
            },
            data: file,
            error : function (result) {
                console.log('error', result);
                },
            success : function (result) {
                console.log('success', result)
            }
        });
    });
}

Error

Uncaught TypeError: Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

jquery-1.10.2.min.js:6 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
    at o (jquery-1.10.2.min.js:6:7939)
    at gn (jquery-1.10.2.min.js:6:8398)
    at x.param (jquery-1.10.2.min.js:6:8180)
    at Function.ajax (jquery-1.10.2.min.js:6:12615)
    at powWowDashboard.do:18456:15

Problem

So I think the problem is with the data I am trying to upload is not in the correct format.

I get the data as follows:

let files = event.target.files;

and then set it in the ajax request:

            data: file,

Question

How should I set the data for the uploaded file in the request?

Would you please _read_ the answers in a duplicate, instead of asking [the same question](https://stackoverflow.com/questions/75554419/jquery-javascript-upload-file-using-ajax) immediately again? — CBroe, Feb 24 '23 at 09:15

score 2 · Accepted Answer · answered Feb 24 '23 at 09:14

You can use FormData to send the files, even if it's not a part of any form. No need to make multiple ajax requests in a loop.

const formData = new FormData();
const files = event.target.files;

for (const file of files) {
  // Attach files
  formData.append('files[]', file);
}

...

$.ajax({
  ...
  data: formData
})

If you're using a PHP backend, the values are available in $_FILES

JQuery submit a file using AJAX where the file is not in a Form

1 Answers1