How to upload string as file with jQuery or other js framework How to upload string as file with jQuery or other js framework ajax ajax

How to upload string as file with jQuery or other js framework


Here's how to do it without manually building the multi-part request body:

var s = 'some string data';var filename = 'foobar.txt';var formData = new FormData();formData.append('file', new File([new Blob([s])], filename));formData.append('another-form-field', 'some value');$.ajax({    url: '/upload',    data: formData,    processData: false,    contentType: false,    type: 'POST',    success: function () {        console.log('ok');    },    error: function () {        console.log('err'); // replace with proper error handling    }});


You need to set the Content-type request header to multipart/form-data and play around with the format a little, I wrote this in Plain Ol' JavaScript (tm) but you could easily rework it for a library:

EDIT: had my coffee now, so modified it for jQuery (no-library version here):

// Define a boundary, I stole this from IE but you can use any string AFAIKvar boundary = "---------------------------7da24f2e50046";var body = '--' + boundary + '\r\n'         // Parameter name is "file" and local filename is "temp.txt"         + 'Content-Disposition: form-data; name="file";'         + 'filename="temp.txt"\r\n'         // Add the file's mime-type         + 'Content-type: plain/text\r\n\r\n'         // Add your data:         + data + '\r\n'         + '--'+ boundary + '--';$.ajax({    contentType: "multipart/form-data; boundary="+boundary,    data: body,    type: "POST",    url: "http://asite.com/apage.php",    success: function (data, status) {    }});


Solution using new FormData() without ajax

str = "Hello!\nI'm text string";var strblob = new Blob([str], {type: 'text/plain'});var formdata = new FormData();formdata.append("file", strblob, "file.txt");formdata.append("field-1", "field-1-data");var requestOptions = {  method: 'POST',  body: formdata,  redirect: 'follow'};fetch("http://{url}", requestOptions)  .then(response => response.text())  .then(result => console.log(result))  .catch(error => console.log('error', error))