How I Can Upload File To Google Drive With Google Drive Api?

I did as in the documentation (https://developers.google.com/drive/api/v3/manage-uploads#http---single-request), but it doesn't work: var fileMetadata = { nam

Solution 1:

Issue and workaround:

• When I tested gapi.client.drive.files.create, it seems that although this method can create new file with the metadata, the file content cannot be included. So in this answer, in order to upload a file by including the file metadata, I would like to propose to upload a file with multipart/form-data using fetch of Javascript. In this case, the access token is retrieved by gapi.auth.getToken().access_token.

• Unfortunately, from your script, I couldn't understand about e.target. So in this sample script, I would like to propose the sample script for uploading a file, which is retrieved from the input tag, with the metadata.

Sample script:

HTML side:

<inputtype="file"id="files" name="file">

Javascript side:

const files = document.getElementById("files").files;

const file = files[0];
const fr = newFileReader();
fr.readAsArrayBuffer(file);
fr.onload = (f) => {
  const fileMetadata = {
    name: file.name,
    parents: this.currentDirectoryId ? [this.currentDirectoryId] : []  // This is from your script.
  }
  const form = newFormData();
  form.append('metadata', newBlob([JSON.stringify(fileMetadata)], {type: 'application/json'}));
  form.append('file', newBlob([newUint8Array(f.target.result)], {type: file.type}));
  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
    method: 'POST',
    headers: newHeaders({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  }).then(res => res.json()).then(res =>console.log(res));
};

• In this script, the file retrieved from input tag is uploaded to Google Drive with multipart/form-data.

Note:

• In this script, it supposes that your authorization script can be used for uploading a file to Google Drive. Please be careful this.
• In this answer, as a sample script, the file is uploaded with uploadType=multipart. In this case, the maximum file size is 5 MB. Please be careful this. When you want to upload the file with the large size, please check the resumable upload. Ref

References:

• Using Fetch
• Files: create
• Upload file data
• Perform a resumable upload