How to upload the file content that is inside a variable with jQuery?

Question

How to send 'data' which is the file content with ajax ? How do I setup the name of that file ?

I'm looking to do it without the DOM "form/input"

<script>

var file_to_upload = "hi I'm the content of a file";

$.ajax({
    url: 'php/upload.php',
    data: file_to_upload,
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

<script>

I don't think jQuery has built-in support for posting files via ajax. [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) does though (and is built into modern browsers), because `body` can be a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob), and the `File` object you get from a `FileList` on an `input` element is a `Blob`. — T.J. Crowder, Jul 16 '18 at 17:42
Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) or [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload). — showdev, Jul 16 '18 at 17:46
Please take the time to ensure that your question is clear and complete before posting. — T.J. Crowder, Jul 16 '18 at 18:14

score 0 · Answer 1 · answered Jul 16 '18 at 18:24

I don't think jQuery has built-in support for posting files via ajax. fetch does though (and is built into modern browsers), because body can be a Blob or a BufferSource (ArrayBuffer or typed array).

You can either send the blob or buffer as the body of the request, or if you want to send it as a named parameter in a multipart form upload, you can create a FormData instance and use a Blob as the value when calling append. Something like:

// This is off the top of my head, not meant to be a perfect,
// all-singing, all-dancing example. You'll need to read the
// linked documentation and adjust as necessary.
var blob = new Blob([/*...file data...*/], {type: "appropriate/mimetype"});
var data = new FormData();
data.append("parameterName", blob);
fetch("php/upload.php", {
    method: "POST",
    body: data
})
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.text(); // or perhaps response.json()
})
.then(result => {
    // ...use the response
})
.catch(error => {
    // ...handle/report the error
});

/*...file data...*/ can be a typed array, an ArrayBuffer, etc.; see the Blob constructor for details.

Or if this is within an async function:

try {
    let blob = new Blob([/*...file data...*/], {type: "appropriate/mimetype"});
    let form = new FormData();
    data.append("parameterName", blob);
    let response = await fetch("php/upload.php", {
        method: "POST",
        body: data
    });
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    let result = await response.text(); // or perhaps response.json()
    })
    // ...use the response
} catch(error) {
    // ...handle/report the error
}

How to upload the file content that is inside a variable with jQuery?

1 Answers1