charliebrownie charliebrownie - 2 months ago 6
AngularJS Question

Send an image in the data uri format using ngFlow

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

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

Here's the code that did it:

function uploadImage($flow) {
    // vm.img.cropped is the image in the data uri format
    // I want to upload
    var blob = new Blob([vm.img.cropped], {
      // mime type should be obtained from your image data, I have
      // 'hardcoded' it just for testing purposes
      type: 'image/png' 
    });
    blob.name = 'file.png';

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

    // finally, upload the image
    $flow.upload();
  }
}