Getting image data from Google Drive using react-google-drive-picker library

Other Questions Google drive
1

Hi everyone!

I’m working on a React app that needs to grab images from Google Drive and do some processing on them. I decided to use the react-google-drive-picker package for this.

When I pick files through the picker, I get back a response object that looks like this:

{
    "fileId": "2-1QsK9FevTDhvxuGnC1OKp6vZyXGwT8f",
    "service": "docs",
    "mimeType": "image/jpeg",
    "fileName": "my-photo-sample.jpg",
    "fileDescription": "",
    "category": "photo",
    "modifiedTime": 1687045678901,
    "thumbnailUrl": "https://drive-thirdparty.googleusercontent.com/16/type/image/jpeg",
    "viewUrl": "https://drive.google.com/file/d/2-1QsK9FevTDhvxuGnC1OKp6vZyXGwT8f/view?usp=drive_web",
    "previewUrl": "https://drive.google.com/file/d/2-1QsK9FevTDhvxuGnC1OKp6vZyXGwT8f/preview?usp=drive_web",
    "fileSizeBytes": 445672,
    "orientationAngle": 0,
    "rotationValue": 0,
    "folderParentId": "2-E7EqXB7FNjXaUefaZPY83Jw88ZdhHM2s"
}

The issue I’m running into is that I can’t actually download or access the image data using the URLs provided. I’ve tried both the viewUrl and previewUrl but they don’t give me the actual image file.

I also attempted to construct a direct download URL like this:

const downloadUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;

But that doesn’t work either.

What I really need is to get the actual image as a blob or File object so I can work with it in my application. Has anyone figured out how to do this with the react-google-drive-picker library?

Thanks in advance for any help!

2

Had this exact problem a few months back. The picker response only gives you metadata, not the actual file content. After selecting files, you need to make a separate API call to Google Drive’s REST API using the fileId. What worked for me was using the gapi.client.drive.files.get() method with alt: 'media' parameter instead of constructing URLs manually. One gotcha I discovered - the access token from the picker might have different scopes than what you need for file downloads, so make sure you’re requesting the correct permissions upfront. Also watch out for CORS issues if you’re trying to fetch directly from the frontend. Sometimes you need to proxy the request through your backend depending on your setup.

3

The react-google-drive-picker library just handles file selection - it won’t grab the actual data. You’ll need to hit the Google Drive API separately once you get the fileId. I use Drive API v3 with the alt=media parameter for this. Make sure your access token has the right scopes (at least drive.readonly). Authentication’s the tricky bit - tokens might expire after the picker session ends, so you may need to refresh them. I always wrap the API call in try-catch since shared files throw permission errors all the time.

4

yeah, ran into this too. the picker won’t give u direct file access - security thing. you’ll need to hit the drive api separately once u got the fileId. just fetch https://www.googleapis.com/drive/v3/files/${fileId}?alt=media with ur access token in the headers. that’ll get you the actual image blob.