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 = "\r\n--" + boundary + "\r\n";
  const close_delim = "\r\n--" + 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; \r\n\r\n' +
      JSON.stringify(metadata) +
      delimiter +
      'Content-Type: ' + contentType + '\r\n' +
      'Content-Transfer-Encoding: base64\r\n' +
      '\r\n' +
      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

I tried a lot but unable to add metadata as part of initial file upload request. I ended up sending metadata in another 'patch' request. Please let me know if you have a better solution

/**
     * Google Cloud Storage API request to insert an object into
     * your Google Cloud Storage bucket.
     */
    function insertObject(fileControl, metadata, callBack) {
        debugger;
      try{
        var fileData = fileControl.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 = "\r\n--" + boundary + "\r\n";
      const close_delim = "\r\n--" + boundary + "--";

      var fileName = metadata.name;

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

        var base64Data = btoa(reader.result);
        var multipartRequestBody =
          delimiter + 
          'Content-Type: application/json; charset=UTF-8 \r\n\r\n' +
          JSON.stringify(metadata1) +
          delimiter +
          'Content-Type: ' + contentType + '\r\n' +
          'Content-Transfer-Encoding: base64\r\n' +
          '\r\n' +
          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/' + PCSING_BUCKET + '/o',
          'method': 'POST',
          'params': {'uploadType': 'multipart'},
          'headers': {
            'Content-Type': 'multipart/related; boundary="' + boundary + '"'
          },
          'body': multipartRequestBody});

        try{
          //Execute the insert object request
             request.execute(function(resp) {               

             multipartRequestBody = {                
                  'metadata': metadata
             }  

             request = gapi.client.request({
              'path': '/storage/' + API_VERSION + '/b/' + PCSING_BUCKET + '/o/' + fileName,
              'method': 'PATCH',                  
              'body': multipartRequestBody
              });

              //https://www.googleapis.com/storage/v1/b/bucket/o/object

            request.execute(function(resp) {
                callBack();
                console.log(resp);
            });

         });

          //Store the name of the inserted object 
          //object = fileData.name;   
        }
        catch(e) {
          alert('An error has occurred: ' + e.message);
        }
      }
    }