Can't open uploaded file in Google Drive using API

Question

I am sending a request in Google Drive API version 3. I have a Base64 image. I have this code,

var callback = function(ret, raw) {
    var obj = $.parseJSON(raw);
    self.uploadUrl = obj.gapiRequest["data"]["headers"]["location"];
    const boundary = '-------314159265358979323846';
      const delimiter = "\r\n--" + boundary + "\r\n";
      const close_delim = "\r\n--" + boundary + "--";

      var reader = new FileReader();
      reader.readAsBinaryString(data);
      reader.onload = function(e) {
      console.log(reader.result);
        var contentType = data.type || 'application/octet-stream';
        var metadata = {
          'name': data.name,
          'mimeType': contentType
        };

        var base64Data = btoa(reader.result);
        var multipartRequestBody = reader.result;
        console.log(self.uploadUrl);
        var request = gapi.client.request({
            'path': self.uploadUrl.replace('https://www.googleapis.com', ''),
            'method': 'PUT',
            'headers': {
              'Authorization': 'Bearer ' + self.state.token, 'Content-Length': data.size, 'Content-Type': data.type
            },
            'body': multipartRequestBody});
          var callback2 = function(file) {
            console.log(file)
          };
        request.execute(callback2);
      }

    };

With that request, I console.log this message: Object {kind: "drive#file", id: "0B0jyCEQS7DFib19iX2FLYm1yR28", name: "MyFileTitle", mimeType: "image/jpeg"}

So I assuming here that I successfully uploaded a file. But when I check the file in Google Drive, I can't open it. No preview of the file also. I downloaded the file, still can't open it. What is wrong in here? anyone can help me?

This is the response header,

Request URL:https://content.googleapis.com/upload/drive/v3/files?uploadType=resumable&upload_id=AEnB2UoIhN3QtsUc1qLW5N_3yG-NOyl9Nm-maYY7T5X4dQbMK_hxu9M-E9L1247jeLEtRQJd8w8IA_GH_6HSWbNrFnocfmt31-oA0iXXHTcZE7k2aIIAvHQ
Request Method:PUT
Status Code:200 
Remote Address:216.58.197.170:443

this is my request header,

Authorization:Bearer <MY_TOKEN>
Content-Type:image/jpeg
Origin:https://content.googleapis.com
X-Requested-With:XMLHttpRequest

uploadType:resumable
upload_id:AEnB2UoIhN3QtsUc1qLW5N_3yG-NOyl9Nm-maYY7T5X4dQbMK_hxu9M-E9L1247jeLEtRQJd8w8IA_GH_6HSWbNrFnocfmt31-oA0iXXHTcZE7k2aIIAvHQ

The request payload is something like this,

ÿØÿàJFIFHHÿÛC       ...

Still can't open the file.

This is the creation of the file,

submitForm(e){
e.preventDefault();
var data = this.refs.file.files[0];
var self = this;
var metadata = {
    'Content-Length': data.size,
    'name': data.name
};

var contentType = data.type;
var multipartRequestBody = JSON.stringify(metadata);
var request = gapi.client.request({
    'path': '/upload/drive/v3/files',
        'method': 'POST',
    'params': {'uploadType': 'resumable'},
    'headers': {
            'Authorization': 'Bearer ' + self.state.token, 'Content-Type': 'application/json; charset=UTF-8', 'X-Upload-Content-Type': data.type, 'X-Upload-Content-Length': data.size
        },
    'body': multipartRequestBody});

var callback = ...

request.execute(callback);
}

The code above is the creation of the file. I added it because maybe the problem is in this part.

to clarify, the file is there in Google Drive, but you can't open its contents? When you download it, what is its size and how does that size compare with the original image? Have you tried looking at the download using an editor or hex editor to see what's in it? — pinoyyid, Mar 10 '17 at 09:09
In your old code before you changed it, can you try changing "BASE64" to "base64" as demoed in [this thread](http://stackoverflow.com/questions/11923927/upload-a-file-to-google-drive-api-using-html5)? — ReyAnthonyRenacia, Mar 10 '17 at 16:15
I get it right? You first create a file with its metadata, then update it in a second call with its content? Why not use directly Google REST API, like this one: https://developers.google.com/drive/v3/web/manage-uploads — transient_loop, Mar 18 '17 at 00:58
I am confused with the line `var base64Data = btoa(reader.result);`. `base64Data` is not used at all. — Tomas, Mar 19 '17 at 14:18

score 0 · Accepted Answer · answered Mar 17 '17 at 08:03

Object {kind: "drive#file", id: "0B0jyCEQS7DFib19iX2FLYm1yR28", name: "MyFileTitle", mimeType: "image/jpeg"}

You are uploading a file of type image/jpeg but the name is MyFileTitle. I think you are confusing drive it cant open a file if it doesn't know what it is.

Try changing it to MyFileTitle.jpg.

Can't open uploaded file in Google Drive using API

1 Answers1