How to upload string as file with jQuery or other js framework
15,015
Solution 1
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 AFAIK
var 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 2
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
}
});
Solution 3
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))
Author by
Romka
Updated on June 05, 2022Comments
-
Romka almost 2 years
Using javascript, I have a file in string (got with ajax request).
How to upload it as file to server by another ajax request ?
-
Marko Dumic almost 14 yearsPlease clarify: do you have file path as a string or you have file content as string and you would like to have it uploaded as a file?
-
Andy E almost 14 years@Marko: It reads like he has the file contents in a string, which he got from an ajax request.
-
-
Pekka almost 14 yearsMmm, nice! Didn't know that was possible in an Ajax request.
-
Andy E almost 14 years@Pekka: Sure is. Handy if you don't have control over the server you're uploading to and it HAS to accept a text file posted with multipart/form-data.
-
chovy over 11 yearsThis worked, except for two adjustments to work with express/node: 1) the last boundary needs to be
+ '--'+boundary+ '--';
and also the contentType in the ajax call needs to be:"multipart/form-data; boundary="+boundary
-
Lukas_Skywalker over 10 years@chovy this is also needed for Rails. Thanks, you just saved me a few hours of debugging
-
redestructa over 7 yearsseems nice... can i transcode Base64 to a File Object? If no i can use the base64 and decode it on the server. but im just curious
-
Dilhan Jayathilake over 7 yearsIs FormData object cross browser compatible?
-
Lokiare almost 6 yearsI'm using Dropzone, but this answer works to convert a string to a file for upload("new File([new Blob([s])], filename)").
-
Jingyi Wang almost 4 yearswhy is contentType false?