upload file and metadata to azure blob storage from cordova client

Question

I have used this example to create a working file upload from my cordova client directly into azure blob storage: http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/

So far so good, but I have custom metadata that I need to add to each file. Can I add the metadata to the file before upload such that the metadata is automatically attached to the file as it is loaded into azure blob storage? I know I could write a c# function in azure to add metadata and call the function from my client after successfully loading the file into blob storage but is there a better way? I worry that the the upload may work, but the subsequent metadata write may fail, leaving my file without its metadata.

Martin

Gaurav Mantri Gaurav Mantri · Accepted Answer · 2018-11-21T10:36:38

It's actually pretty straight forward. When you commit block list, you pass the metadata key/value pair as part of request headers.

For example, let's say you have 2 metadata key/value pairs: key1/value1 and key2/value2. This is what your commit block list code would look like:

function commitBlockList() {
  var uri = submitUri + '&comp=blocklist';
  console.log(uri);
  var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
  for (var i = 0; i < blockIds.length; i++) {
      requestBody += '<Latest>' + blockIds[i] + '</Latest>';
  }
  requestBody += '</BlockList>';
  console.log(requestBody);
  $.ajax({
      url: uri,
      type: "PUT",
      data: requestBody,
      beforeSend: function (xhr) {
          xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
          xhr.setRequestHeader('Content-Length', requestBody.length);
          xhr.setRequestHeader('x-ms-meta-key1', 'value1');
          xhr.setRequestHeader('x-ms-meta-key2', 'value2');
      },
      success: function (data, status) {
          console.log(data);
          console.log(status);
      },
      error: function (xhr, desc, err) {
          console.log(desc);
          console.log(err);
      }
  });
}

For reference, please see Put Block List REST API documentation: https://docs.microsoft.com/en-us/rest/api/storageservices/Put-Block-List

upload file and metadata to azure blob storage from cordova client

1 Answers