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

Other Questions Google drive
1

Hi everyone!

I’m working on a project where I need to get images from Google Drive and process them. I’m using the react-google-drive-picker package for this.

When I pick files from Google Drive, the library gives me back data about the selected files. Here’s what the response looks like:

{
    "fileId": "2-5XkL9FghSWrgvwHoC8PJp4uYxWFwT6f",
    "service": "docs",
    "mimeType": "image/jpeg",
    "fileName": "photo-12345-landscape.jpg",
    "description": "",
    "category": "image",
    "lastModified": 1686945678901,
    "thumbnailUrl": "https://drive-thirdparty.googleusercontent.com/16/type/image/jpeg",
    "viewUrl": "https://drive.google.com/file/d/2-5XkL9FghSWrgvwHoC8PJp4uYxWFwT6f/view?usp=drive_web",
    "previewUrl": "https://drive.google.com/file/d/2-5XkL9FghSWrgvwHoC8PJp4uYxWFwT6f/preview?usp=drive_web",
    "fileSizeBytes": 892435,
    "rotationAngle": 0,
    "rotationValue": 0,
    "folderId": "2-G8HpWB7FNjXZTefZPY83Jw88YdhHM2s"
}

The issue I’m having is that I can’t actually download or fetch the image using the viewUrl or previewUrl. I also tried constructing a direct download link like this:

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

But this doesn’t work either. How can I get the actual image data as a blob or File object from this information? Any help would be great!

2

I encountered the same issue while developing and found that Google Drive restricts direct access to files without appropriate authentication. To retrieve the file, you need to utilize the Google Drive API v3 with the fileId obtained from the picker. Make an authenticated request to https://www.googleapis.com/drive/v3/files/{fileId}?alt=media using the OAuth token you received from the picker process. Ensure your OAuth scope includes ‘https://www.googleapis.com/auth/drive.readonly’ or ‘https://www.googleapis.com/auth/drive.file’ based on your requirements. The picker merely provides metadata; a separate API call is necessary to access the actual file content. After obtaining the blob response, converting it to a File object is straightforward if required.

3

yeah, those picker urls won’t work directly - cors and auth will block you. you need to hit the drive api with your access token instead. try fetch('https://www.googleapis.com/drive/v3/files/${fileId}?alt=media', {headers: {'Authorization': 'Bearer ' + accessToken}}) - that should work.

4

Authentication scope requirements totally caught me off guard when I first used this library. If you’re getting permission errors with the correct API endpoint, double-check two things: your Google Cloud project has the Drive API enabled, and you’re requesting the right scopes during OAuth flow. Some files also have sharing restrictions that block downloads even with proper auth. I handle these by catching 403 errors and showing users appropriate messages. The fileId from the picker is definitely the right approach - just keep your OAuth token active throughout the session for API calls to work.