title: Upload a file to Google Drive API using HTML5
body: <p>I'm creating a Google Chrome extension which use Google Drive API.
  I have to upload a file with HTML5.</p>
  
  <p>For text files, there is no problem. But when I want to upload a binary file, there are always errors.</p>
  
  <p>So when I upload a file using the FileReader in HTML5 as BinaryString, my image is corrupted, I can't read it.</p>
  
  <p>And when I use Base64 encoding (with the header in the body part "Content-Transfer-Encoding: base64"), I have a 400 Bad Request -> Malformed multipart body.</p>
  
  <p>Can you help me please ?
  Thanks :)</p>
  
  <p>PS: I don't want to use Google Drive SDK, I prefer write all the code.</p>
  
  <pre><code>var bb, reader;
  
  var meta = {
  "title": "mozilla.png",
  "mimeType": "image/png",
  "description": "Mozilla Official logo"
  };
  
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://developer.mozilla.org/media/img/mdn-logo-sm.png', true);
  xhr.responseType = 'arraybuffer';
  
  xhr.onload = function(e){
  if(this.status == 200){
      bb = new WebKitBlobBuilder();
      bb.append(this.response);
      console.log('Download OK');
  
      reader = new FileReader();
      reader.readAsDataURL(bb.getBlob('image/png'));
      reader.onloadend = function(e){
          console.log('Reader OK');
  
          var bound = 287032396531387;
  
          var parts = [];
          parts.push('--' + bound);
          parts.push('Content-Type: application/json');
          parts.push('');
          parts.push(JSON.stringify(meta));
          parts.push('--' + bound);
          parts.push('Content-Type: image/png');
          parts.push('Content-Transfer-Encoding: base64');
          parts.push('');
          parts.push(reader.result);
          parts.push('--' + bound + '--');
  
          var xhr = new XMLHttpRequest();
          xhr.open("POST", "https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart", true);
          xhr.setRequestHeader("Authorization", "Bearer token123456");
          xhr.setRequestHeader("Content-Type", "multipart/mixed; boundary=" + bound);
  
  
          xhr.onload = function(e){
              console.log("DRIVE OK", this, e);
          };
  
          xhr.send(parts.join("\r\n"));
      }
  }
  };
  
  xhr.send();
  </code></pre>
  
  <p>For Binary Upload, just modify this line :</p>
  
  <pre><code>reader.readAsDataURL(bb.getBlob('image/png'));
  </code></pre>
  
  <p>by that</p>
  
  <pre><code>reader.readAsBinaryString(bb.getBlob('image/png'));
  </code></pre>
  
  <p>and delete this line :</p>
  
  <pre><code>parts.push('Content-Transfer-Encoding: base64');
  </code></pre>
  
  <p>I tried to create a file by sending the metadata first and upload the content after like in this <a href="https://stackoverflow.com/questions/10317638/inserting-file-to-google-drive-through-api/10323612#10323612">post</a> and I always get a 404 error for uploading the content, but this is another story...</p>