Google Drive Resumable File Upload issue with Javascript API

Question

I am trying to integrate Google drive resumable file upload/update with my application. But when i update the file, file is updating in encoded format it is not taking the actual content. Encoded format is working for multiplepart uploadType but same content is not working for Resumable upload. Please find the below details

Step 1 : Start the resumable session

function uploadFile(fileData) {

    var accessToken = 'ya29.nwI5Em6UnYGHvVzVx7lBk5tD-xzFl4_JG3_c-_t4FJ3owll_8i_rL5M17LFV6VlF7QE';

    const boundary = '-------314159265358979323846';
    const delimiter = "\r\n--" + boundary + "\r\n";
    const close_delim = "\r\n--" + boundary + "--";

   var contentType = fileData.type || 'application/octet-stream';
   var metadata = {
            'name': fileData.name,
            'mimeType': contentType,
            'Content-Type': contentType,
            'Content-Length': fileData.size
        };

   var request = gapi.client.request({
        'path' : 'upload/drive/v3/files',
        'method' : 'POST',
        'params' : {'uploadType':'resumable'},
        'headers' : {
          'X-Upload-Content-Type' : fileData.type,
          'Content-Type': 'application/json; charset=UTF-8',
          'Authorization': 'Bearer ' + accessToken,
        },
        'body' : metadata
    });

   request.execute(function(resp, raw_resp) {
      var locationUrl =   JSON.parse(raw_resp).gapiRequest.data.headers.location;
      console.log(locationUrl);
      uploadToLocationUrl(locationUrl, fileData);
   });
}

Upto here it's fine I am getting Location Url and then calling a function to upload the file.

Step 2 : Resumable session initiation request

     function uploadToLocationUrl(locationUrl, fileData)
       {
            var reader = new FileReader();
            reader.readAsBinaryString(fileData);
            reader.onload = function (e) {
            var contentType = fileData.type || 'application/octet-stream';
            var metadata = {
                'name': fileData.name,
                'mimeType': contentType,
                'Content-Type': contentType,
                'Content-Length': fileData.size
            };

              var base64Data = btoa(reader.result);
              var multipartRequestBody =
                  delimiter +
                  'Content-Type: application/json\r\n\r\n' +
                  JSON.stringify(metadata) +
                  delimiter +
                  'Content-Type: ' + contentType + '\r\n' +
                  'Content-Transfer-Encoding: base64\r\n' +
                  '\r\n' +
                  base64Data +
                  close_delim;

           var requestPost = gapi.client.request({
                'path' : locationUrl,
                'method' : 'PUT',
                'headers' : {
                  'X-Upload-Content-Length' : fileData.size
                },
                'body' : multipartRequestBody
              });
            console.log(requestPost);

            requestPost.execute(function(resp, raw_resp) {
              console.log(resp);
            });
         }
}

Result : Updated file in google drive

---------314159265358979323846
Content-Type: application/json

{"name":"api.txt","mimeType":"text/plain"}
---------314159265358979323846
Content-Type: text/plain
Content-Transfer-Encoding: base64

MSkgTmVlZCBhbiBhcGkgd2hpY2ggd2lsbCByZXR1cm4gYWxsIGxlYWRzIGVtYWlsIGlkLg0KMikgTmVlZCBhbiBhcGkgdG8gY29udmVydCBtdWx0aXBsZSBjb250YWN0IGludG8gbGVhZC4NCjMpIE5lZWQgYW4gYXBpIGZvciBnb29nbGUgc2lnbiBpbi4vLyBkb24ndCBkaXNjdXNzIGFib3V0IHRoaXMgb25lIG5vdywgZmlyc3Qgd2Ugd2lsbCBkaXNjdXNzIGFib3V0IHRoaXMgQVBJLg==
---------314159265358979323846--

Sunil Soni Sunil Soni · Accepted Answer · 2017-10-03T11:57:03

Sorry for the delayed answer,

you just need to change the uploadToLocationUrl function code

find below the updated code,

    function uploadToLocationUrl(locationUrl, fileData,arrayBuffer)
   {


        var contentType = fileData.type || 'application/octet-stream';

        var requestPost = gapi.client.request({
            'path' : locationUrl,
            'method' : 'PUT',
            'headers' : {
                'Content-Type': contentType,
                "Content-Length": arrayBuffer.byteLength,

            },
            'data' : arrayBuffer
          });
        console.log(requestPost);

        requestPost.execute(function(resp, raw_resp) {
          console.log(resp);
        });



    }

you no need to send the metadata again, just byte array is fine.

Google Drive Resumable File Upload issue with Javascript API

1 Answers