Save/upload video file from local drive to Azure blob storage via API?

Question

I am currently using this code to select a video file from local disk (via webpage using ) and send that to my api:

    <form enctype="multipart/form-data">
    <input name="file" type="file" accept="video/*"/>
    <input type="button" value="Upload" />
</form>
<progress></progress>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

$(':file').on('change', function () {
  var file = this.files[0];

    if (file.type !== "video/mp4" && file.type!== "video/quicktime") {
        alert("Content must be video .mp4 or .mov")
    }

$(':button').on('click', function () {
    if (file.type == "video/mp4" || file.type == "video/quicktime"){
  $.ajax({
    // Your server script to process the upload
    url: 'azureAPI',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
} else {
    alert ("File type must be .mp4 or .mov")
}
});
});
});
</script>

This sends (what I am assuming is) binary data in the form of this:

���
1!QAa"q2B���R�#3br��u�����S6C$%��5�cts�T&D4��U��d���e!1AQa2"q�#����3��B���X"��?��!=��W�u�ٗ�-2���?����ۯ�Կ�i���t����M���Y�-��-Vdϊ�P�<�<U#TY]K��dW
���

I believe this includes webkitform boundary etc.

I am now trying to save that binary data to a block blob, however I am having trouble saving binary data to Azure block blob using:

var buf = Buffer.from(req.body, 'binary');
blobService.createBlockBlobFromText(container, 'fileName.mp4', buf, {contentSettings: {contentType: 'video/mp4', contentEncoding: 'binary'}}, function (error, result, response) {
    if(!error){
        callback('uploaded');
    } else {
        callback('nope');
    }

});

I have also tried to create a readable stream:

var container = 'abc';
var azure = require('azure-storage');
const getStream = require('into-stream');
var blobService = azure.createBlobService();

module.exports = function (context, req) {
    var json = req.body;
    save (context, json, function(result){
        context.log(result);
        context.done();
    })
}

function save (context, json, callback){
var buf = Buffer.from(json); 
var stream = getStream(buf); 
var streamLength = buf.length; 
blobService.createBlockBlobFromStream(container, 'fileName.mp4', stream, streamLength, {contentSettings: {contentType: 'video/mp4'}}, function (error, result, response) { 
    if(!error) { 
        callback('uploaded'); 
        } else { 
            callback('nope'); 
            } 
            });

}

I tried this, without the contentSettings at first but that saved the data as contentType: application/octet-stream which wasn't opening as a video. I then added contentType, and lastly tried adding contentEncoding as well.

This saved the correct contentType but still the video could not be opened.

Does anyone know how to save binary data to Azure blob storage via this method? It seems to save the file, but when trying to open it, it is corrupted/not encoded correctly? I am unsure of the issue. Perhaps I need to remove the webkitform boundary etc data from it before saving?

Thanks for any pointers, apologies if I left anything out.