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.

Answer 1

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.