Upload Base64 image to Google drive using javascript

Question

I'm trying to upload an Base64 encoded image to google drive using Jquery AJAX POST request. IT uploaded the data on Google drive but it doesn't show the image on Google Drive viewer / after downloading the file.

The request call gets success message with JSON response.

Following is the snippet of the code: [imageData is Base64 encoded string]

$.ajax({
        type: 'POST',
        url: 'https://www.googleapis.com/upload/drive/v2/files?uploadType=media',
        headers: {
          'Authorization': 'Bearer ' + access_token,
          'Content-Type': 'image/jpeg',
          'Content-Length': imageData.length, // imageData is Base64 encoded string
        },
        data: imageData // imageData is Base64 encoded string
       }).done(function (result, textStatus, jqXHR) {
                console.log('success : ' + textStatus);
                console.log(JSON.stringify(result));

            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log('fail : ' + textStatus + ' desc : ' + SON.stringify(jqXHR));
            });

Thanks in advance.

Vishrut

@ Vishrut-Shah Did you ever resolve this issue or get it to work? I am having the SAME issue / problem. Thanks. — tamak, Sep 13 '14 at 16:55
From User http://stackoverflow.com/users/1915075/arvigeus: Try data: `imageData.replace(/^data:.*;base64,/, "")`. I can't confirm this is a real answer, but had some similar issue with different kind of project, and this solved it. Better-than-nothing answer. — Reporter, Sep 23 '14 at 11:10
Possible duplicate of [Uploading to Google Drive - how to use a base64-encoded image or an image path](https://stackoverflow.com/questions/33743100/uploading-to-google-drive-how-to-use-a-base64-encoded-image-or-an-image-path) — Paul, Nov 04 '17 at 05:10

score 2 · Answer 1 · answered Nov 04 '17 at 05:02

This uploads data, but not the data it needs to upload to show the picture in Drive. By uploading base64 format, you have uploaded a big string onto Google Drive instead of a binary image file. The base64 encoding contains different bytes than the original file, and in drive is producing files about 50% bigger than the associated binary.

If you download the base64 file, and turn it into an image data url to display it, it will display fine. But you won't be able to see it in google drive web UI because it apparently stores the base64 data as is instead of converting it to a binary file. (as of Nov 2017)

gapi doesn't play well with blob uploads, so perhaps instead try using googleapi's cors-upload-sample from github or my fork as described here

Upload Base64 image to Google drive using javascript

1 Answers1