httprequest - Uploading additional metadata as part of file upload request to Google Cloud Storage

Question

I tried a lot to get this thing done but all in vain.

Here is complete documentation

Link to JavaScript code base

If I try Google's online tool to upload file then it successfully creates whatever metadata I supply. I am not sure what different they are doing. Unfortunately, I can't even figure it out.

My latest code base to upload a file along with metadata

function insertObject(event) {

  try{
    var fileData = event.target.files[0];
  } 
  catch(e) {
    //'Insert Object' selected from the API Commands select list
    //Display insert object button and then exit function
    filePicker.style.display = 'block';
    return;
  }

  const boundary = 'hoho314159265358979323846';
  const delimiter = "
--" + boundary + "
";
  const close_delim = "
--" + boundary + "--";

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

     var base64Data = btoa(reader.result);
    var multipartRequestBody =
      delimiter +
      'Content-Type: application/json; 

' +
      JSON.stringify(metadata) +
      delimiter +
      'Content-Type: ' + contentType + '
' +
      'Content-Transfer-Encoding: base64
' +
      '
' +
      base64Data +
      close_delim;

    //Note: gapi.client.storage.objects.insert() can only insert
    //small objects (under 64k) so to support larger file sizes
    //we're using the generic HTTP request method gapi.client.request()
    var request = gapi.client.request({
      'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',
      'method': 'POST',
      'params': {'uploadType': 'multipart'},
      'headers': {
        'Content-Type': 'multipart/related; boundary="' + boundary + '"'
      },
      'body': multipartRequestBody});
      //Remove the current API result entry in the main-content div
      listChildren = document.getElementById('main-content').childNodes;
      if (listChildren.length > 1) {
        listChildren[1].parentNode.removeChild(listChildren[1]);
      }
    try{
      //Execute the insert object request
      executeRequest(request, 'insertObject');
      //Store the name of the inserted object 
      object = fileData.name;   
    }
    catch(e) {
      alert('An error has occurred: ' + e.message);
    }
  }
}

I have read multipart documentation and tried to do the same thing but no help.

If I create metadata (in json format) like following then it throws error code 400 saying object required otherwise it uploads file but not metadata.

var metadata = { 'metadata': { 'customerName': 'Sigma1', 'model': 'xvrt56', 'issue': 'loud sound' } };

Answer 1

Waitting for answers