Trouble with File Uploads to Microsoft Azure with Javascript

Hello,

I'm trying to incorporate Microsoft Azure Cognitive services into Max MSP. The current sticking point is how to upload files and the like.

I have a javascript prototype that works partially in the jweb object. It looks like this:

var authkey = undefined

makeblob = function (dataURL) {
    // taken from here: https://stackoverflow.com/questions/34047648/how-to-post-an-image-in-base64-encoding-via-ajax/34064793#34064793
  var BASE64_MARKER = ';base64,';
  if (dataURL.indexOf(BASE64_MARKER) == -1) {
      var parts = dataURL.split(',');
      var contentType = parts[0].split(':')[1];
      var raw = decodeURIComponent(parts[1]);
      return new Blob([raw], { type: contentType });
  }
  var parts = dataURL.split(BASE64_MARKER);
  var contentType = parts[0].split(':')[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  
  var uInt8Array = new Uint8Array(rawLength);
   for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
}

function getAuthKeys(){
  if(authkey === undefined){
    window.max.getDict('authkeys', function(dict){
      authkey = dict.key
    })
  }
}

function handleFileSelect(e){
  var input = e.target
  var reader = new FileReader()
  reader.onload =  function(){
    var blob = makeblob(reader.result)
    processImage(blob)
  }
  reader.readAsDataURL(input.files[0])
}

$(document).ready(function(){
  getAuthKeys()
  $('#fileselect').bind('change', handleFileSelect)
})

function processImage(imageData) {

  var subscriptionKey = authkey;
  var uriBase =
       "https://westus.api.cognitive.microsoft.com/vision/v2.0/analyze";
  // Request parameters.
  var params = {
      "visualFeatures": "Categories,Description,Color",
      "details": "",
      "language": "en",
  };
  
    // Make the REST API call.
  $.ajax({
      url: uriBase + "?" + $.param(params),
      processData: false,
      // Request headers.
      beforeSend: function(xhrObj){
          xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
          xhrObj.setRequestHeader(
              "Ocp-Apim-Subscription-Key", subscriptionKey);
      },
      type: "POST",
      // Request body.
      data: imageData,
  }).done(function(data) {
    window.max.setDict('imageAnalysis', data)
    window.max.outlet('fileAnalyzed', 1, )
   }).fail(function(jqXHR, textStatus, errorThrown) {
      // Display error message.
      var errorString = (errorThrown === "") ? "Error. " :
          errorThrown + " (" + jqXHR.status + "): ";
      errorString += (jqXHR.responseText === "") ? "" :
          jQuery.parseJSON(jqXHR.responseText).message;
      alert(errorString);
  });
};

The problem I have now is how to move images and sound files back and forth between Max and JavaScript. I can't figure out how to generate a Base64 Blob from a jitter matrix and I can't figure out how to generate a Jitter Matrix from a blob.

When I do it with just the JS object I use XMLHTTPRequest. my code:

function anything(file){
  var ajaxreq = new XMLHttpRequest(); 
 ajaxreq.open("POST","https://westus.api.cognitive.microsoft.com/vision/v2.0/analyze?visualFeatures=Categories%2CDescription%2CColor&;details=&language=en");
  ajaxreq.setRequestHeader("Content-Type", "application/octet-stream");
  ajaxreq.setRequestHeader("Ocp-Apim-Subscription-Key" , authkey);
  ajaxreq.onreadystatechange = readystatechange_parsejson;
  ajaxreq.send(file);
}
function readystatechange_parsejson()
{
  if (this.readyState ==4){
    post(this.responseText);
  }
}

Unfortunately, this uploads the image in the wrong format, and I get an "InvalidImageFormat" from the server.

What are some good strategies for handling binary files in javascript with Max?

Thanks for all your help
Lindsey