title: Send Image in HTTP Request Body
body: <p>I am using Google Javascript Client API To save an image to Google Cloud Storage.</p>
  
  <p>The Cloud storage wants a put request to be posted to its api endpoints. I read the file from file input. It is inform of a Javascript File Object. After that the following code runs.</p>
  
  <pre><code>var reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function (e) {
  
    var base64Data = btoa(e.target.result);
    gapi.client.load('storage', 'v1', function () {
        var rpcRequest = gapi.client.request({
              path: '/upload/storage/v1/b/bucketname/o',
              method: 'POST',
              params: {
                'uploadType': 'resumable',
                'name': file.name,
                'Expires': &lt;?php echo $this-&gt;expires ?&gt;,
                'GoogleAccessId': '&lt;?php echo $this-&gt;accessid ?&gt;',
                'Signature': '&lt;?php echo $this-&gt;signature ?&gt;'
               },
             headers: {
               'X-Upload-Content-Type': file.type,
               'X-Upload-Content-Length': file.length,
               'Content-Type': 'application/json; charset=UTF-8',
             },
         });
  
  
     rpcRequest.execute(function (jsonResponse, rawResponse) {
       var response = jQuery.parseJSON(rawResponse);
       var session_uri = response.gapiRequest.data.headers.location;
       initiateUpload(session_uri);
     });
  
     function initiateUpload(session_uri){
        gapi.client.load('storage', 'v1', function () {
          var rpcRequest = gapi.client.request({
          path: session_uri,
          method: 'PUT',
          headers: {
           'Content-Length': file.length,
           'Content-Type': file.type,
          },
          body: base64Data,
        });
  
       rpcRequest.execute(function (jsonResponse, rawResponse) {
         console.log(rawResponse);
       });
     });
    }
  
    });
                  }
  </code></pre>
  
  <p>The file appears in cloud storage but is corrupted. I started debugging the HTTP requests and found that the message body for by request is different as compared to standard Google Upload request. Below are images of the request bodies.</p>
  
  <p><strong>My HTTP PUT REQEST Body:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/Q8EW1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q8EW1.png" alt="enter image description here"></a></p>
  
  <p><strong>Google HTTP PUT Request Body</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eAHi4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAHi4.png" alt="enter image description here"></a></p>
  
  <p>The code which initiates by request in above given code is </p>
  
  <pre><code>                        var rpcRequest = gapi.client.request({
                              path: session_uri,
                              method: 'PUT',
                              headers: {
                                  'Content-Length': file.length,
                                  'Content-Type': file.type,
                              },
                              body: base64Data,
                          });
  
                          rpcRequest.execute(function (jsonResponse, rawResponse) {
                              console.log(rawResponse);
                          });
  </code></pre>
  
  <p>I handle the file object by reading it through the reader and then encoding it </p>
  
  <pre><code>        var reader = new FileReader();
          reader.readAsBinaryString(file);
          reader.onload = function (e) {
             // request preparation logic goes here.
          }
  </code></pre>
  
  <p>What am i doing wrong ?</p>