How to strip type from Javascript FileReader base64 string?

Question

I've got the following code in my Javascript:

var reader = new FileReader();
reader.onloadend = function () {
    alert(reader.result);
};

This shows me the following data:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYSDCUgSze0AAAAAA5JREFUCNdjrGJgYmAAAAJ0AH4SDHVIAAAAAElFTkSuQmCC

The thing is that I only want the part after the comma. I tried getting it from reader.result.value, reader.result.valueOf() and some other combinations, but can't find the correct one to JUST get the base64 string starting from after the comma. So a second idea is to simply strip off the comma and all that is before that, but I'm kind of unsure how to do that.

Would anybody have any idea how to get this done? All tips are welcome!

Answer 1

The following functions will achieve your desired result:

var base64result = reader.result.split(',')[1];

This splits the string into an array of strings with the first item (index 0) containing data:image/png;base64 and the second item (index 1) containing the base64 encoded data.

Another solution is to find the index of the comma and then simply cut off everything before and including the comma:

var base64result = reader.result.substr(reader.result.indexOf(',') + 1);

See JSFiddle.

Answer 2

let reader: FileReader = new FileReader();
 
 reader.onloaded = (e) => {
    let base64String = reader.result.split(',').pop();
 };

or

let base64String = /,(.+)/.exec(reader.result)[1];

Answer 3

You can try splitting your data using ;base64,.

// In here you are getting the data type. Ex - png, jpg, jpeg, etc. You can use this for any further purposes.
var dataType = reader.result.split(';base64,')[0];

// In here you are getting the base64 string and you can use this for your purpose.
var base64result = reader.result.split(';base64,')[1];