Send Image in HTTP Request 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>