Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript isn't uploading binary data

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*
like image 744
natli Avatar asked Nov 04 '22 14:11

natli


1 Answers

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 + "--";
like image 123
Daniel Trebbien Avatar answered Nov 15 '22 00:11

Daniel Trebbien