Convert base64 image data to image file in angularjs

First, you convert dataURL to Blob do this

var blob = dataURItoBlob(imageBase64);

function dataURItoBlob(dataURI) {

            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {type:mimeString});
        }

then

var file = new File([blob], "fileName.jpeg", {
            type: "'image/jpeg'"
          });

Your code looks ok except for a point:

The data you are giving to the Blob object is not blob data, it's a text one this is base64 encoded. You should decode data before insert.

Once I don't know which API you would like, I will use a pseudofunction called decodeBase64 which we will understand do the inverse of the Base64 encode (there are many implementations for this function in web).

Your code should look like this:

// base64 already encoded data
var imageBase64 = "image base64 data";

//this is the point you should use
decodedImage = decodeBase64(imageBase64)

//now, use the decodedData instead of the base64 one
var blob = new Blob([decodedImage], {type: 'image/png'});

///now it should work properly
var file = new File([blob], 'imageFileName.png');

Anyway, I can't see the need to use AngularJS there once you are not already using.

Needed this in Angular 8, so i modified the answer a bit to typescript and directly to file, since you have the mimetype from the datastring, you might as well use that to create the file.

dataURItoBlob(dataURI : any, fileName : string) : File{

    // convert base64/URLEncoded data component to a file
    var byteString;
   if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
   else
       byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
       ia[i] = byteString.charCodeAt(i);
    }

    return new File([ia],fileName, {type:mimeString});
}

all credits go to @byteC0de with the answer https://stackoverflow.com/a/35401651/1805974

Only reason I would post the answer here is due to google keeps sending me to this page.