Google Drive API V3 (javascript) update file contents

Question

I want to update the contents of a Google doc using the Google Drive API V3 (javascript):

https://developers.google.com/drive/v3/reference/files/update

I'm able to update the file metadata (such as the name) but the documentation doesn't include patch semantics for the actual file content. Is there a way to pass a JSON.stringify() value as a param in the gapi.client.drive.files.update request:

var request = gapi.client.drive.files.update({
    'fileId': fileId,
    'name' : 'Updated File Name',
    'uploadType': 'media',
    'mimeType' : 'application/vnd.google-apps.document'
  });

var fulfilledCallback = function(fulfilled) { 
    console.log("Update fulfilled!", fulfilled);
};
var rejectedCallback = function(rejected) { 
    console.log("Update rejected!", rejected);
};

request.then(fulfilledCallback, rejectedCallback)

score 14 · Answer 1 · answered Jan 04 '17 at 15:16

There are two issues:

The JavaScript client library doesn't support media upload.
Google Docs files don't have a native file format.

You can work around issue #1 by writing your own upload functionality built on top of XHR. The following code should work on most modern web browsers:

function updateFileContent(fileId, contentBlob, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.onreadystatechange = function() {
    if (xhr.readyState != XMLHttpRequest.DONE) {
      return;
    }
    callback(xhr.response);
  };
  xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=media');
  xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.auth.getToken().access_token);
  xhr.send(contentBlob);
}

To work around issue #2 you can send Drive a file type that Google Docs can import from, such .txt, .docx, etc. The following code uses the function above to update the content of a Google Doc using plain text:

function run() {
  var docId = '...';
  var content = 'Hello World';
  var contentBlob = new  Blob([content], {
    'type': 'text/plain'
  });
  updateFileContent(fileId, contentBlob, function(response) {
    console.log(response);
  });
}

score 12 · Answer 2 · answered Jan 06 '17 at 18:13

I build gDriveSync.js library to sync with google drive using javascript v3 api https://github.com/vitogit/gDriveSync.js

You can check the sourcecode of what I did (https://github.com/vitogit/gDriveSync.js/blob/master/lib/drive.service.js) , basically is a 2 step process, first you create the file and then you update it.

  this.saveFile = function(file, done) {
    function addContent(fileId) {
      return gapi.client.request({
          path: '/upload/drive/v3/files/' + fileId,
          method: 'PATCH',
          params: {
            uploadType: 'media'
          },
          body: file.content
        })
    }
    var metadata = {
      mimeType: 'application/vnd.google-apps.document',
      name: file.name,
      fields: 'id'
    }
    if (file.parents) {
      metadata.parents = file.parents;
    }

    if (file.id) { //just update
      addContent(file.id).then(function(resp) {
        console.log('File just updated', resp.result);
        done(resp.result);
      })
    } else { //create and update
      gapi.client.drive.files.create({
        resource: metadata
      }).then(function(resp) {
        addContent(resp.result.id).then(function(resp) {
          console.log('created and added content', resp.result);
          done(resp.result);
        })
      });
    }
  }

score 1 · Answer 3 · answered Mar 26 '19 at 03:23

Yo you can do this with fetch using the node-js google API, assuming you stored your token(s) already in a var named tokens:

fetch("https://www.googleapis.com/upload/drive/v3/files/ID_OF_DRIVE_FILE?uploadType=media",
        {   
            headers: {
                'Content-Type':'multipart/related; boundary=a5cb0afb-f447-48a6-b26f-328b7ebd314c',
                'Accept-Encoding': 'gzip',
                'User-Agent': 'google-api-nodejs-client/0.7.2 (gzip)',
                Authorization:tokens.token_type +" "+ tokens.access_token,
                Accept:"application/json"
            },
            method:"PATCH",
            body: "OK now iasdfsdgeaegwats AGAIN intresting",
            cb(r) {

            }
        }).then(r => {
            console.log(r);
        });

Rick Mohr · Answer 4 · 2021-11-04T20:56:41.640

Here's how to update a JSON file using fetch. (It's from jsGoogleDriveDemo, showing how web app users can save and open files in Google Drive using API v3 -- authorize, upload, get, update, and use the Google file picker.)

function update() {
    const url = 'https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=media';
    fetch(url, {
        method: 'PATCH',
        headers: new Headers({
            Authorization: 'Bearer ' + oauthToken,
            'Content-type': mimeType
        }),
        body: JSON.stringify({ hello: 'universe' })
    })
        .then(result => result.json())
        .then(value => {
            console.log('Updated. Result:\n' + JSON.stringify(value, null, 2));
        })
        .catch(err => console.error(err))
}

Google Drive API V3 (javascript) update file contents

4 Answers4

Linked