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

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 immediately again? — C3roe
– C3roe, Commented Feb 24, 2023 at 9:15

Anurag Srivastava · Accepted Answer · 2023-02-24 09:14:41Z

2

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

answered Feb 24, 2023 at 9:14

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related