Google Drive API V3 Javascript - Create File with Content

Question

This question has been asked before, but the answer was using API V2. The google documentation does not clarify how to create a file with its content using javascript client code. I tried using the code listed under Node, however, it only creates the file, it does not insert any content. Here is my code:

  let fileMetadata = {
    'name': name,
    parents: [parentId]
  };

  let media = {
    mimeType: 'text/plain',
    body: 'content inside file'
  };

  gapi.client.drive.files.create({
    resource: fileMetadata,
    media,
    fields: 'id'
  })
  .then(response => {
    console.log('response: ', response);
  })
  .catch(() => {
    console.log('something is wrong');
  });

Can someone help me insert content into files please?

I have also experienced about your situation. gapi.client.drive.files.create() can create an empty file. But it seems that it cannot directly upload a file with contents. This might be able to be resolved in the future update. So in the current stage, I upload files to Google Drive using XMLHttpRequest as a workaround. For your situation, how about this workaround? — Tanaike
– Tanaike, Commented Aug 9, 2018 at 23:50
Shouldn't that be media: media, instead of media,? It's a bit tough to determine the type of upload being issued by the client library, but to add both metadata and content you need to either use a resumable or multipart upload. Specifying the upload type may be an additional parameter to the JS client. Also, you should probably link to the related question. — tehhowch
– tehhowch, Commented Aug 12, 2018 at 19:46
'media' is written correctly, it's ES6 shorthand when key and value in an object have the same name. I tried setting the multipart download type in the 'create' invocation, but also didn't work. — Philip-lf
– Philip-lf, Commented Aug 13, 2018 at 17:29

Tanaike · Accepted Answer · 2018-08-14 02:39:32Z

9

How about this sample script? In my environment, although gapi.client.drive.files.create() can create an empty file on Google Drive, it cannot directly upload files including contents. I think that this might not be able to upload files and metadata with the multipart/related, although this might be resolved by the future update. So now, as one of workarounds, I use XMLHttpRequest.

Before you use this sample script, please confirm the following points.

In your situation, you have already been able to create files using gapi. In my script, the access token is retrieved using gapi.
When you use this script, please set fileContent and metadata.

Sample script :

In this sample script, a text file including contents is created under a folder.

var fileContent = 'sample text'; // As a sample, upload a text file.
var file = new Blob([fileContent], {type: 'text/plain'});
var metadata = {
    'name': 'sampleName', // Filename at Google Drive
    'mimeType': 'text/plain', // mimeType at Google Drive
    'parents': ['### folder ID ###'], // Folder ID at Google Drive
};

var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id');
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.responseType = 'json';
xhr.onload = () => {
    console.log(xhr.response.id); // Retrieve uploaded file ID.
};
xhr.send(form);

Request body :

In this script, form is as follows. This is sent to Google Drive using the create method of Drive API.

------WebKitFormBoundaryxX0XmxgooMjdUECR
Content-Disposition: form-data; name="metadata"; filename="blob"
Content-Type: application/json

{"name":"sampleName","mimeType":"text/plain","parents":["#####"]}
------WebKitFormBoundaryxX0XmxgooMjdUECR
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: text/plain

sample text
------WebKitFormBoundaryxX0XmxgooMjdUECR--

In my environment, I confirmed that this works fine. But if this didn't work in your environment, I'm sorry.

answered Aug 14, 2018 at 2:39

Tanaike

203k12 gold badges126 silver badges222 bronze badges

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

3 Comments

Philip-lf Over a year ago

Awesome! Thank you!

Tanaike Over a year ago

@Philip-lf Welcome. I'm glad your issue was solved. Thank you, too.

Steve Phuc Over a year ago

it work thank you , @Tanaike also upload the new version with fetch in his blog here tanaikech.github.io/2018/08/13/…

Collectives™ on Stack Overflow

Google Drive API V3 Javascript - Create File with Content

1 Answer 1

Sample script :

Request body :

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Sample script :

Request body :

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related