How to download file from google drive with drive.file scope?

[Yan_Zexuan]

Hi there,

I want to create a google drive add-on, which can right click on a .dwg file then view it with pure web. So user don’t have to install AutoCAD to open the file.

I use google pick to pick a file, then need to request the file content to browser then view it with my js sdk. My app is deployed at (URL Removed by Staff).

It seems that I cannot use drive.readonly scope, which is restricted scope. “drive.file“ should be ok to view and update the file. I only need to view it, won’t update the file. But when I use following code to fetch the file, I always get 404 error (which should be 403 actually). If I change to use drive.readonly, I can get the file correctly, but google said I cannot use that one.

const response = await fetch(
  `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`,
  {
    headers: {
      Authorization: `Bearer ${token.access_token}`,
      Accept: 'application/octet-stream',
    },
    credentials: 'omit',
    mode: 'cors',
  }
)

I can get a dwonload url from google picker, but I can only download the file with browser but not with my code, I get cors error in that case.

Could any body help? Thanks in advance.

Thanks,
Yan

[a_aleinikov]

Hi @Yan_Zexuan With drive.file you can only access files your app created or files the user explicitly opened with your app if you just pick a file that was not opened via your Drive app Google returns 404 by design to hide the file you must implement Open with integration and ensure the same OAuth token with drive.file scope is used in both Picker and the fetch request then files.get with alt=media will work without needing drive.readonly

[Yan_Zexuan]

Thanks a lot! But I’m still a bit confusing. My app is a viewer, it doesn’t create or update file. Here is a video showing how it works: (URL Removed by Staff) .

I beleive that I used the same OAuth token and scope with google picker and the fetch request. My app firstly ask user to connect to google drive, then I can get token with gapi.client.getToken(), then pass to Picker and files.get. And, still doesn’t work!

const token = gapi.client.getToken()
accessToken = token.access_token

const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.SUPPORT_DRIVES)
.setOAuthToken(accessToken)
.setDeveloperKey(API_KEY)
.addView(docsView)
.setCallback((data: any) => {
  if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
    const file = data[google.picker.Response.DOCUMENTS][0]
    const pickerFile: DriveFile = {
      id: file.id,
      name: file.name || 'Unknown',
      size: file.sizeBytes ? file.sizeBytes.toString() : '0',
      lastEditedUtc: file.lastEditedUtc || file.lastEditedUtc || '',
      mimeType: file.mimeType || '',
      url: file.url || ''
    }
    resolve(pickerFile)
  } else if (data[google.picker.Response.ACTION] === google.picker.Action.CANCEL) {
    reject(new Error('User cancelled file selection'))
  }
})
.build()

All my code is here BTW, GitHub - thingraph/dwg-viewer-for-google-drive: A modern web application that integrates Google Drive with a powerful DWG viewer, allowing you to view DWG/DXF files directly from your Google Drive.

[a_aleinikov]

@Yan_Zexuan With drive.file your app can only download files that were explicitly opened with your app through Drive Open with integration not just selected in Picker

Picker selection alone does not grant download permission under drive.file even if you use the same token this is why Drive returns 404 by design

Since your app is a viewer you must configure it as a Drive app with an Open with entry in Google Cloud Console and ensure the file is opened from Drive into your app not only picked

If you do not want to implement Open with then drive.readonly is required but that scope is restricted and needs verification

So the issue is not the token handling your flow must start from Drive Open with for drive.file to work properly

[Yan_Zexuan]

It’s good to know that drive.file doesn’t has download permission!

That will be ok if user can open dwg files with my app with open with entry. I don’t know how to configure it yet, I will try…

Thank you again!