Uploading a file with XMLHttprequest - Missing boundary in multipart/form-data
Well this is strange a little bit for me, but this is what worked:
// Open
xhr.open('POST', this.options.action, true);
// !!! REMOVED ALL HEADERS
// Send
xhr.send(formData);
In this case, on server side I don't read the file sent via php://input
but the file will be in the $_FILES
array.
This solved my problem, but I'm still curious why appears now the file in $_FILES
?
Tested in Chrome, Mozilla, Safari, and IE10.
Tamás Pap
Full Stack Developer. Making people's lives easier. Full time.
Updated on September 11, 2020Comments
-
Tamás Pap over 3 years
I'm uploading a file with XMLHttprequest. Here is the JS function, that uploads a file:
var upload = function(file) { // Create form data var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); // Open xhr.open('POST', this.options.action); // Set headers xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("X-File-Type", file.type); // Send xhr.send(formData); }
On the server side, in upload.php I read the file this way:
file_put_contents($filename, (file_get_contents('php://input')));
Everything works fine, except that I get a PHP Warning:
Missing boundary in multipart/form-data POST data in Unknown on line 0
.If I remove this line:
xhr.setRequestHeader("Content-Type", "multipart/form-data");
the warning goes away.What should be the problem here?
-
Gijs over 11 yearsThe spec explains (point 3) that the browser sets the correct headers (including the correct multipart boundary indication in the Content-Type) if you haven't manually specified anything. The file appears in
$_FILES
because PHP automatically puts files from multipart form uploads in that superglobal. -
Tamás Pap over 11 yearsThank you for helping me understanding this.
-
MCH almost 4 yearsI had to comment out this for it to work
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
...... (but keptxhr.setRequestHeader('Accept', 'multipart/form-data')
)