2

I am running into a problem with google drive rest api. I have a button and upon the user click, I get a blob excel file from my backend and upload the file to google drive. The file is being uploaded to the google drive, but when I opened it, it says '[object blob]'. The actual content isn't in the file. Here is my function for creating the file. I found this solution from here: Create File with Google Drive Api v3 (javascript)

       var UploadExcelFile = function(name, data, callback){

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

        const contentType = "application/vnd.google-apps.spreadsheet";

        var metadata = {
            'name': name,
            'mimeType': contentType
            };

            var multipartRequestBody =
                delimiter +
                'Content-Type: application/json\r\n\r\n' +
                JSON.stringify(metadata) +
                delimiter +
                'Content-Type: ' + contentType + '\r\n\r\n' +
                data +
                close_delim;

            var request = gapi.client.request({
                'path': '/upload/drive/v3/files',
                'method': 'POST',
                'params': {'uploadType': 'multipart'},
                'headers': {
                'Content-Type': 'multipart/related; boundary="' + boundary + '"'
                },
                'body': multipartRequestBody});
            if (!callback) {
            callback = function(file) {
                console.log(file)
            };
            }
            request.execute(callback);

      }```

```This is the response from the server:

  Response {type: "basic", url: 
  "http://localhost:54878/home/generateexcel", redirected: false, 
   status: 
   200, ok: true, …}
  body: ReadableStream
  locked: true
  __proto__: ReadableStream
  bodyUsed: true 
   headers: Headers
  __proto__: Headers
  ok: true
  redirected: false
  status: 200
  statusText: "OK"
  type: "basic"
  url: "http://localhost:54878/home/generateexcel"}

I am passing in the name of the file and the blob excel file from the backend like so:

 fetch('/home/generateexcel', {
                    method: 'POST',
                    body: JSON.stringify(postData),
                    headers: {
                        "Content-Type": "application/json"
                    },
                }).then(function (response) {
                    response.blob().then(function (result)
                        UploadExcelFile('newfile', result)
                    });
                }).catch(function (err) {
                    // Error :(
                });
Tanaike
  • 181,128
  • 11
  • 97
  • 165
Intelligent
  • 127
  • 1
  • 12

1 Answers1

1
  • You want to upload the downloaded xlsx file to Google Drive.
  • You have already confirmed that the xlsx file could be downloaded.
  • When a xlsx file is uploaded, you want to convert to Google Spreadsheet.
  • You can use Drive API and the access token for uploading files.

If my understanding is correct, how about this modification? In this modification, I used FormData() for creating the request body and used fetch() for requesting to Drive API. I think that there are several solutions for your situation. So please think of this as just one of them.

Modified script:

I modified UploadExcelFile(). Please modify as follows and try again.

function UploadExcelFile(name, data) {
  var metadata = {
    name: name,
    mimeType: "application/vnd.google-apps.spreadsheet",
  };
  var form = new FormData();
  form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
  form.append('file', data);
  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,name,kind', {
    method: 'POST',
    headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  }).then((res) => {
    return res.json();
  }).then(function(val) {
    console.log(val);
  });
}

In my environment, I could confirm that this script worked. But if this didn't work in your environment, I apologize.

Tanaike
  • 181,128
  • 11
  • 97
  • 165