Send an image in the data uri format using ngFlow

Question

I am using an input to load an image, then converting it in the data uri format to pass it into the ngImgCrop directive to crop that image.

So far I have all of this working, but I am struggling trying to upload the cropped image which is in the data uri format using ngFlow.

I have been tried several ways with no success, has anyone been able to do this?

I am afraid I am missing something, I tried using the .addFile() method and passing in the image in the data uri format but it does not work this way.

Answer 1

I finally found a solution, creating a Blob and pushing it into Flow's files array worked!

This StackOverflow answer also helped, as I had to convert the image in the data uri format to binary to create the Blob (the function dataURItoBlob() did it for me).

Here's the code that did it:

function uploadImage($flow) {
  if ($flow) {
    // 'vm.img.cropped' is the image in data uri format to upload
    var blob = dataURItoBlob(vm.img.cropped);
    blob.name = 'file.png';

    var file = new Flow.FlowFile($flow, blob);
    $flow.files.push(file)

    $flow.upload();
  }
}

function dataURItoBlob(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: mimeString});
};