CODEWITHSUNDEEP
javascriptajaxgoogle-drive-api
Mudit Singh
Mudit Singh

Reputation: 33

Google Drive API multipart upload gets file corrupted, size 1kb

I've been trying to upload a file using the Google Drive API but I'm facing this issue and I can't seem to find the solution. When uploading an image, it uploads a corrupted file of size 1kb with correct metadata and while uploading text files, it uploads a text file with [object file] as data and not the original data of the file.

$("form").submit(function(evt){  
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
      var control = document.getElementById("csv");
      var files = control.files;
      var dat=files[0];
   $.ajax({
       url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
         type: 'POST',
       contentType: false,
       data: "\n--foo_bar_baz\ \nContent-Type: application/json; charset=UTF-8\ \n\n{ 'name': '"+dat.name+"' }\ \n--foo_bar_baz\ \nContent-Type: "+dat.type+"\ \nContent-Transfer-Encoding: base64\ \n\n"+dat+"\ \n--foo_bar_baz--\ ",
       headers: {
            "Authorization":"Bearer <?php echo $result["access_token"]; ?>",
            "Content-Type": "multipart/related; boundary=foo_bar_baz",
            "Content-Length": formData.length
       },
       async: false,
       cache: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         var res = JSON.stringify(response);
        console.log("S: "+res);
       },
       error: function(response) {
        var res = JSON.stringify(response);
        console.log("E: "+res);
       }
   });
   return false;
 });

Upvotes: 1

Views: 263

Answers (1)

Tanaike
Tanaike

Reputation: 201408

How about this answer? Please think of this as just one of several possible answers.

Modification points:

  • You are trying to upload the file as base64. But in your script, dat is not base64.
    • In this case, I used FileReader.
  • Please remove \ of \ \n in "\n--foo_bar_baz\ \nContent-Type: application/json; charset=UTF-8\ \n\n{ 'name': '"+dat.name+"' }\ \n--foo_bar_baz\ \nContent-Type: "+dat.type+"\ \nContent-Transfer-Encoding: base64\ \n\n"+dat+"\ \n--foo_bar_baz--\ ",.

When above points are reflected to your script, it becomes as follows.

Modified script:

$("form").submit(function(evt){  
  evt.preventDefault();
  var formData = new FormData($(this)[0]);
  var control = document.getElementById("csv");
  var files = control.files;
  var dat = files[0];

  var f = new FileReader();  // Added
  f.onload = function(){  // Added
    const base64Data = this.result.split(",")[1];  // Added
    $.ajax({
      url: 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',
      type: 'POST',
      contentType: false,
      data: "\n--foo_bar_baz\nContent-Type: application/json; charset=UTF-8\n\n{'name': '"+dat.name+"'}\n--foo_bar_baz\nContent-Type: "+dat.type+"\nContent-Transfer-Encoding: base64\n\n"+base64Data+"\n--foo_bar_baz--\n",  // Modified
      headers: {
        "Authorization": "Bearer <?php echo $result["access_token"]; ?>",
        "Content-Type": "multipart/related; boundary=foo_bar_baz",
        "Content-Length": formData.length
      },
      async: false,
      cache: false,
      enctype: 'multipart/form-data',
      processData: false,
      success: function (response) {
        var res = JSON.stringify(response);
        console.log("S: "+res);
      },
      error: function(response) {
        var res = JSON.stringify(response);
        console.log("E: "+res);
      }
    });
  }
  f.readAsDataURL(dat);  // Added
  return false;
});

Note:

  • When uploadType=multipart is used, the maximum file size is 5 MB. Please be careful this. Ref

If this was not the direct solution of your issue, I apologize.

Upvotes: 1

Related Questions