1

Adding CropperJS into a nodejs solution, and I'm trying to get the returned Base64 string back into file format. So I can send the file to the upload function.

I can't change any functionality and need to use file type to send as a parameter.

I tried: Creating a blob and passing it -> get an error can't to parse the file.

//this is used to upload the file 
File.upload(file).then(function (savedFile) {


//with the new cropper i get back base64 string from:
$scope.imgSrc = $scope.cropperCrop.getCroppedCanvas().toDataURL();

How do I convert imgSrc to file to pass into the File upload function?

Dale K
  • 25,246
  • 15
  • 42
  • 71
MrJShaun
  • 25
  • 5
  • check this one: https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery – Raa Sep 12 '19 at 09:32
  • can you share code snippet? – Sandeep Patel Sep 12 '19 at 09:42
  • @Raa i tried that but got an error when sending it through as a parameter.: angular.js:15567 TypeError: Cannot create a Parse.File with that data. at new s (parse.min.js:13) at Object.upload (FileUploadService.js:6) – MrJShaun Sep 12 '19 at 09:47
  • File.upload(file).then(function (savedFile) { console.log(savedFile); $scope.obj.image = savedFile; $scope.isImageOneUploading = false; $scope.$apply(); – MrJShaun Sep 12 '19 at 09:48

1 Answers1

0

You can use this function to convert Base64 image string to image/file object.

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

//Usage example:
var base64String = "data:image/jpeg;base64,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"
var file = dataURLtoFile(base64String, 'filename.png');
console.log(file);
JkAlombro
  • 1,696
  • 1
  • 16
  • 30
  • I tried this and getting angular.js:15567 TypeError: File is not a constructor do i need to add any javascript for this? – MrJShaun Sep 12 '19 at 10:05
  • @MrJShaun nope. It should work as long as you put it in a `.js` file. Where did you put the function btw? – JkAlombro Sep 12 '19 at 10:08
  • Thanks for the feedback , Im putting in a .js file. which contains a controller : angular.module('app') .controller('PlaceCtrl', function ($scope,....) { to get the new croped image data. $scope.imgSrc = $scope.cropperCrop.getCroppedCanvas().toDataURL(); Inserted your function here, and it says File is not a constructor error – MrJShaun Sep 12 '19 at 10:17
  • @MrJShaun here's what you should try. Place the function I've posted outside any controllers/directives/etc. Just put it maybe at the bottom of whatever javascript file you're using. Then call it the way I did. I edited my answer to show you a real working example. Try to run the code snippet and you will see that it indeed outputs an image object. – JkAlombro Sep 12 '19 at 10:21
  • And is `Blob` constructor available? You probably don't need `File` anyway, which is indeed not supported by all legacy browsers. – Kaiido Sep 12 '19 at 10:22
  • @JkAlombro this worked! Thanks so much!! added the code outside the controller and it went through correctly to the mongo db. Thanks you so much! been stuck on this for 4 days now – MrJShaun Sep 12 '19 at 10:33