Question

My javascript function only uploads text files correctly. Can anybody help me figure out how to make it also accept images etc. ?

function fileUpload(files) {
  if (!files.length) {  
   fileList.innerHTML = "<p>No files selected!</p>";  
  } else {    
var list = document.createElement("ul");

for (var i = 0; i < files.length; i++) {

  //Set vars
  var file = files[i],
  fileName = file.name,
  fileSize = file.size,  
  fileData = file.getAsBinary(),  
  boundary = "xxxxxxxxx",  
  uri = "receive.php",

  //Create file info HTML output
  li = document.createElement("li");  
  list.appendChild(li);
  var info = document.createElement("span");  
  info.innerHTML = file.name + ": " + file.size + " bytes";  
  li.appendChild(info);

  //Start sending file
  var xhr = new XMLHttpRequest();
  xhr.open("POST", uri, true);  
  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.

  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {  

        if (xhr.responseText != "") {  
          alert(xhr.responseText); // display response.  
        }  
      }  
    }  
  } 

  var body = "--" + boundary + "\r\n";  
  body += "Content-Disposition: form-data; name='upload'; filename='" + fileName + "'\r\n";  
  body += "Content-Type: application/octet-stream\r\n\r\n";  
  body += fileData + "\r\n";  
  body += "--" + boundary + "--";  

  xhr.send(body);  

}  
fileList.appendChild(list);
return true;
  }
}

Update: I found the following function online at http://code.google.com/p/html5uploader/ but I can’t figure out how to apply it to my current function. Is xhr.sendAsBinary the only thing that changed?

// Upload image files
upload = function(file) {

    // Firefox 3.6, Chrome 6, WebKit
    if(window.FileReader) { 

        // Once the process of reading file
        this.loadEnd = function() {
            bin = reader.result;                
            xhr = new XMLHttpRequest();
            xhr.open('POST', targetPHP+'?up=true', true);
            var boundary = 'xxxxxxxxx';
            var body = '--' + boundary + "\r\n";  
            body += "Content-Disposition: form-data; name='upload'; filename='" + file.name + "'\r\n";  
            body += "Content-Type: application/octet-stream\r\n\r\n";  
            body += bin + "\r\n";  
            body += '--' + boundary + '--';      
            xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
            // Firefox 3.6 provides a feature sendAsBinary ()
            if(xhr.sendAsBinary != null) {
                xhr.sendAsBinary(body); 
*snip*

Answer 1

There is a W3C example of sending a GIF image using multipart/form-data at http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"
Content-Type: multipart/mixed; boundary=BbC04y

--BbC04y
Content-Disposition: file; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--BbC04y
Content-Disposition: file; filename="file2.gif"
Content-Type: image/gif
Content-Transfer-Encoding: binary

...contents of file2.gif...
--BbC04y--
--AaB03x--

Notice the extra line Content-Transfer-Encoding: binary. Try adding that.

EDIT: Try base64-encoding the file data using the Base64 jQuery plugin:

  var body = "--" + boundary + "\r\n";
  body += "Content-Disposition: form-data; name='upload'; filename='" + fileName + "'\r\n";
  body += "Content-Type: application/octet-stream\r\n";
  body += "Content-Transfer-Encoding: base64\r\n\r\n";
  body += $.base64Encode(fileData) + "\r\n";
  body += "--" + boundary + "--";