Submit ajax request with file upload via JavaScript

Question

I have a form that can be submitted via form.submit() and the response is correct. Now I want to submit it using ajax, but I have a problem when submitting a file.

The form is pretty simple:

<form name="Upload" enctype="multipart/form-data" method="post" action="upload.asp"> <input type="file" name="file" id="fileinput"/> <input type="button" name="FileUpload" class="button" id="append_new" onclick="xmlhttpPost('upload.asp', document.getElementById('fileinput').files[0]);" value="submit file"/> </form> 

I got the ajax call as following:

function xmlhttpPost(strURL, form) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'multipart/form-data'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send('file=' + file); } function updatepage(str){ document.getElementById("fileitems").innerHTML = str; } 

The problem now is: the server gets the string [object file] rather than the actual file content. How can I make sure file data is submitted?

Answer 1

You can use formData for that:

function xmlhttpPost(strURL, form) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'multipart/form-data'); self.xmlHttpReq.onreadystatechange = function () { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } if ( !! window.FormData) { var formData = new FormData(); formData.append('file', form); self.xmlHttpReq.send(formData); } } function updatepage(str) { document.getElementById("fileitems").innerHTML = str; } 

Here's a decent example of a full ajax file uploader with progress.

Answer 2

You are missing this:

self.xmlHttpReq.setRequestHeader("X_FILENAME", file.name); 

That will differentiate between a normal POST and a file upload for the app tier.

If you are using PHP, it would look something like:

$file = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : '');