angular-file-upload with ngImgCrop

Question

I\'m using (ngImgCrop) to crop an image and then upload the cropped image to server using (angular-file-upload).

I can get the $dataURI from the \"on-change\" option in

Answer 1

I guess you'll find a proper answer in this method. I found it in Github, in the angular-file-upload issues page (https://github.com/nervgh/angular-file-upload/issues/208):

/**
   * Converts data uri to Blob. Necessary for uploading.
   * @see
   *   http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
   * @param  {String} dataURI
   * @return {Blob}
   */
  var dataURItoBlob = function(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});
  };

You should be able to get a file instance doing something like this:

var blob = dataURItoBlob($scope.croppedImage);

I don't know if it works in the good way, but it seems.