1

I am trying to upload a simple text file to Google Drive in Angular using gapi, but I can't find how to actually populate the file. I managed to authenticate and create a file, and then I wanted to use the update function to update the file's contents as described here in the Google Drive API v3 documentation.

Here is my Angular code:

Creating the file:

createFile() {
    return gapi.client.drive.files.create({
      resource: {
        name: `test.csv`
      }
    }).then(response => {
      console.log("Response", response.result.id);
      return response.result.id;
    })
  }

This creates the file and I can see it in my Drive's root folder. Then I try to add the contents of this file (using the file ID of the file I just created) but it is not clear to me from the documentation how to pass the content in the update call.

  updateFile(fileId) {
    return gapi.client.drive.files.update({
      fileId: fileId,
      body: "this is the content of my file"
    }).then(response => {
      console.log("Response", response);
    })
  }

I also tried to pass the content directly in the create call, based on the example they give in the documentation (link above)

  createFile() {
    return gapi.client.drive.files.create({
      resource: {
        name: `test.csv`
      },
      media: {
        body: "this is the content of my file"
      }
    }).then(response => {
      console.log("Response", response.result.id);
    })
  }

Though this doesn't work either.

1
  • Hi @vdvaxel, how are you using/loading gapi? Commented Mar 2, 2022 at 22:02

1 Answer 1

3
  • You want to upload a text file to Google Drive by including the content using Javascript.
  • You have already been able to get and put value for Google Drive using Drive API.
  • Your access token can be used for uploading a file to Google Drive.

Issue and workaround:

Unfortunately, in the current stage, it seems that gapi.client.drive.files.create cannot still send the request including the content. Ref And, when I tested the update method using gapi now, I think that gapi.client.drive.files.update cannot also send the request including the content.

So in this case, it is required to use a workaround. In this workaround, fetch is used. When fetch is used, the request of multipart/form-data is easily created.

Pattern 1:

In this pattern, the text file is uploaded to Google Drive by including the content using the create method with fetch.

Sample script:

const content = 'this is the content of my file';
const metadata = {name: 'test.txt', mimeType: 'text/plain'};
let form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', new Blob([content], {type: 'text/plain'}));
fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
  method: 'POST',
  headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
  body: form
})
.then(res => res.json())
.then(val => console.log(val));

Pattern 2:

In this pattern, the text file is created by gapi.client.drive.files.create, and the created text file is updated by the update method of Drive API with fetch.

Sample script:

gapi.client.drive.files.create({resource: {name: 'test.txt'}})
.then(response => {
  const fileId = response.result.id;
  const content = 'this is the content of my file';
  const metadata = {name: 'test.txt', mimeType: 'text/plain'};
  let form = new FormData();
  form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
  form.append('file', new Blob([content], {type: 'text/plain'}));
  fetch('https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=multipart', {
    method: 'PATCH',
    headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  })
  .then(res => res.json())
  .then(val => console.log(val));
});

References:

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for your detailed and clear answer! I went for option one and it worked fine
@vdvaxel Thank you for replying. I'm glad your issue was resolved.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.