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?

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?

• javascript
• file
• google-drive-api
• google-api-js-client

Share Improve this question Follow edited Aug 12, 2018 at 19:46 tehhowch 9,87244 gold badges2727 silver badges4646 bronze badges asked Aug 9, 2018 at 21:18 Philip-lfPhilip-lf 11522 silver badges77 bronze badges 7

• 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 Commented Aug 9, 2018 at 23:50
• I think that is the only course to take, thanks Tanaike. – Philip-lf Commented Aug 10, 2018 at 20:24
• Wele. If you need a sample script, feel free to tell me. – Tanaike Commented Aug 10, 2018 at 23:19
• 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 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 Commented Aug 13, 2018 at 17:29

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 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./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.