How do you download an image with Google Drive api V3 to a browser client?

Question

The objective is to let the user of an app download an image (jpg) from Google Drive via a browser.

Using the code further down, I do manage to have the browser prompt the 'Save as' dialog and the user saving the file to disk, however trying to open the jpg file results in an error:

"Error interpreting JPEG image file (Not a jpeg file: starts with 0xc3 0xbf)"

Is there something wrong with the code below please?

Or could it be that 'response.body' needs decompressing since the response has a "content-encoding: gzip"?

const downloadFile = (fileId) => {
        gapi.client.drive.files.get({
            fileId: fileId,
            alt: "media",
          })
            .then((response) => {

                const objectUrl = URL.createObjectURL(new Blob([response.body] , {type:'image/jpeg'}))

                // 'ref' is 'userRef' React hook pointing to an anchor element:
                ref.current.href = objectUrl
                ref.current.download = 'my-image.jpg'
                ref.current.click()
            })
            .catch((err) => console.log(err))
}

Answer 1

I have experienced the same issue with your situation. At that time, at first, I converted the returned value to Unit8Array and converted it to the blob. So, in your script, how about the following modification?

From:

const objectUrl = URL.createObjectURL(new Blob([response.body] , {type:'image/jpeg'}))

To:

const objectUrl = URL.createObjectURL(new Blob([new Uint8Array(response.body.length).map((_, i) => response.body.charCodeAt(i))], {type: 'image/jpeg'}));