CODEWITHSUNDEEP
javascriptgoogle-apigoogle-drive-api
phuwin
phuwin

Reputation: 3270

How to use Google Drive API to download files with Javascript

I want to download files from google drive with javascript API. I have managed to authenticate and load list of files using gapi.client.drive.files request. However, I stuck at downloading those files.
My attempt to download the file:

var request = gapi.client.drive.files.get({
        fileId:id,
        alt:'media'
});
request.execute(function(resp){
        console.log(resp);
});

I have these errors when trying to run the above:

(403) The user has not granted the app 336423653212 read access to the file 0B0UFTVo1BFVmeURrWnpDSloxQlE.

(400) Bad Request

I recognize that the files which aren't google drive file (google doc, google slide) return the 403 error.
I am new to this. Any help and answer is really appreciated.

Update 0

From Google Drive documentation about Handling API Error, here is part of the explanation for 400 errors

This can mean that a required field or parameter has not been provided, the value supplied is invalid, or the combination of provided fields is invalid.

This is because I have alt:'media' in my parameter object.

I tried gapi.client.drive.files.export, but it doesn't work either and it returns (403) Insufficient Permission although my Google Drive account has the edit permission for those files. Here is my code:

var request = gapi.client.drive.files.get({
    fileId:element.id,
});
request.then(function(resp){
    console.log(resp.result);
    type = resp.result.mimeType;
    id = resp.result.id;
    var request = gapi.client.drive.files.export({
        fileId:id,
        mimeType:type
    })
    request.execute(function(resp){
        console.log(resp);
    });
});

Update 1

Based on abielita's answer, I have tried to make an authorized HTTP request but it doesn't download the file. It actually returns the file information in response and responseText attribute in the XMLHttpRequest object.

  function test() {
    var accessToken = gapi.auth.getToken().access_token;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://www.googleapis.com/drive/v3/files/"+'1A1RguZpYFLyO9qEs-EnnrpikIpzAbDcZs3Gcsc7Z4nE', true);
    xhr.setRequestHeader('Authorization','Bearer '+accessToken);
    xhr.onload = function(){
        console.log(xhr);
    }
    xhr.send('alt=media');
  }

______________________________________________________

I found out that I can actually retrieve URLs of all those files from the folder using files' webViewLink or webViewContent attributes.

My code:

var request = gapi.client.drive.files.list({
    q:"'0Bz9_vPIAWUcSWWo0UHptQ005cnM' in parents", //folder ID
    'fields': "files(id, name, webContentLink, webViewLink)"
  });
request.execute(function(resp) {
        console.log(resp);
}

Upvotes: 10

Views: 23545

Answers (6)

Subham Rout
Subham Rout

Reputation: 1

let url = https://drive.google.com/uc?id=${file_id}&export=download;

Make sure to pass the file_id in this link. You can get the file id from the file you want to download by getlink --> general access. Make sure the file is public.

Upvotes: 0

rectalogic
rectalogic

Reputation: 1333

I was able to download using the files.get API:

var fileId = '<your file id>';
gapi.client.drive.files.get(
    {fileId: fileId, alt: 'media'}
).then(function (response) {
    // response.body has the file data
}, function (reason) {
    alert(`Failed to get file: ${reason}`);
});

Upvotes: 0

Kirill Skomarovskiy
Kirill Skomarovskiy

Reputation: 1575

Task: download the file and create File object; Environment: browser;

const URL = 'https://www.googleapis.com/drive/v3/files';
const FIELDS = 'name, mimeType, modifiedTime';

const getFile = async (fileId) => {
  const { gapi: { auth, client: { drive: { files } } } } = window;
  const { access_token: accessToken } = auth.getToken();
  const fetchOptions = { headers: { Authorization: `Bearer ${accessToken}` } };
  
  const {
    result: { name, mimeType, modifiedTime }
  } = await files.get({ fileId, fields: FIELDS });
  
  const blob = await fetch(`${URL}/${fileId}?alt=media`, fetchOptions).then(res => res.blob());
  const fileOptions = {
    type: mimeType,
    lastModified: new Date(modifiedTime).getTime(),
  };
  
  return new File([blob], name, fileOptions);
};

Upvotes: 2

RoccoB
RoccoB

Reputation: 2579

Phu, you were so close!

Thank you for sharing your method of using the webContentLink and webViewLink. I think that is best for most purposes. But in my app, I couldn't use viewContentLink because need to be able to enter the image into a canvas, and the image google provides is not CORS ready.

So here is a method

var fileId = '<your file id>';
var accessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;// or this: gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.googleapis.com/drive/v3/files/"+fileId+'?alt=media', true);
xhr.setRequestHeader('Authorization','Bearer '+accessToken);
xhr.responseType = 'arraybuffer'
xhr.onload = function(){
    //base64ArrayBuffer from https://gist.github.com/jonleighton/958841
    var base64 = 'data:image/png;base64,' + base64ArrayBuffer(xhr.response);

    //do something with the base64 image here

}
xhr.send();

Notice that I set the response type to arraybuffer, and moved alt=media up to the xhr.open call. Also I grabbed a function that converts the array buffer to base64 from https://gist.github.com/jonleighton/958841.

Upvotes: 7

phuwin
phuwin

Reputation: 3270

I found out that I can actually retrieve URLs of all those files from the folder using files'
webViewLink or webViewContent attributes. A file which is of Google Drive type (Google Doc, Google Sheet, etc...) will have webViewLink attribute and a non Google Drive type file will have webContentLink. The webViewLink will open the file in Google Drive and the webContentLink will download the file. My code:

var request = gapi.client.drive.files.list({
    q:"'0Bz9_vPIAWUcSWWo0UHptQ005cnM' in parents", //folder ID
    fields: "files(id, name, webContentLink, webViewLink)"
});
request.execute(function(resp) {
    console.log(resp); //access to files in this variable
}

Upvotes: 2

abielita
abielita

Reputation: 13469

Based from this documentation, if you're using alt=media, you need to make an authorized HTTP GET request to the file's resource URL and include the query parameter alt=media.

GET https://www.googleapis.com/drive/v3/files/0B9jNhSvVjoIVM3dKcGRKRmVIOVU?alt=media
Authorization: Bearer ya29.AHESVbXTUv5mHMo3RYfmS1YJonjzzdTOFZwvyOAUVhrs

Check here the examples of performing a file download with our Drive API client libraries.

String fileId = "0BwwA4oUTeiV1UVNwOHItT0xfa2M";
OutputStream outputStream = new ByteArrayOutputStream();
driveService.files().get(fileId)
        .executeMediaAndDownloadTo(outputStream);

For the error (403) Insufficient Permission, maybe this is a problem with your access token, not with your project configuration.

The insufficient permissions error is returned when you have not requested the scopes you need when you retrieved your access token. You can check which scopes you have requested by passing your access_token to this endpoint: https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=ACCESS_TOKEN

Check these links:

Upvotes: 9

Related Questions