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))