Angular-file-upload with ngImgCrop

Question

I use ( ngImgCrop ) to crop the image and then upload the cropped image to the server using ( angular-file-upload ).

I can get $ dataURI from the on-change option in ngImgCrop. But I need File instace to call $ upload. How can I get a cropped image file instance to load:

$scope.upload = $upload.upload({ url: '/api/fileupload', file: [**file cropped here**] }).progress(function (evt) { // }).success(function (data, status, headers, config) { // }); 

Answer 1

I think you will find the correct answer in this method. I found it on Github on the angular -file-upload problems 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 force the file instance to do something like this:

 var blob = dataURItoBlob($scope.croppedImage); 

I do not know if this works in a good way, but it seems.

Answer 2

try something like:

  var uploader = $scope.uploader = new FileUploader({ url: '/saveImagePath', autoUpload: false }); angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect); var handleFileSelect=function(evt) { var file=evt.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (evt) { $scope.$apply(function($scope){ $scope.myImage=evt.target.result; }); }; reader.readAsDataURL(file); }; 

the bootloader does not support base64 images, so you will need to convert the cropped image from base64 to blob

 function base64ToBlob(base64Data, contentType) { contentType = contentType || ''; var sliceSize = 1024; var byteCharacters = atob(base64Data); var bytesLength = byteCharacters.length; var slicesCount = Math.ceil(bytesLength / sliceSize); var byteArrays = new Array(slicesCount); for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) { var begin = sliceIndex * sliceSize; var end = Math.min(begin + sliceSize, bytesLength); var bytes = new Array(end - begin); for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) { bytes[i] = byteCharacters[offset].charCodeAt(0); } byteArrays[sliceIndex] = new Uint8Array(bytes); } return new Blob(byteArrays, { type: contentType }); } 

you need to manually bind files to the queue as follows:

 $scope.submit = function () { var file = base64ToBlob($scope.currentPortfolio.croppedImage.replace('data:image/png;base64,',''), 'image/jpeg'); uploader.addToQueue(file); uploader.uploadAll(); }; 

on the server side, you received two types of files sent as an HTML file, and another un base64, which is a cropped image.