How to strip type from Javascript FileReader base64 string?

JavascriptBase64Strip

Javascript Problem Overview


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!

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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

or

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

Solution 3 - Javascript

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,')[1];

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

Solution 4 - Javascript

You could also do

var base64=reader.result.replace(/^data:image\/\w+;base64,/, "");

Solution 5 - Javascript

You can use the following regex to replace any kind of data type:

const base64 = reader.result.toString().replace(/^data:(.*,)?/, "");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionkramer65View Question on Stackoverflow
Solution 1 - JavascriptSani Singh HuttunenView Answer on Stackoverflow
Solution 2 - JavascriptOleh LeskivView Answer on Stackoverflow
Solution 3 - JavascriptDushanView Answer on Stackoverflow
Solution 4 - JavascriptNelson BwogoraView Answer on Stackoverflow
Solution 5 - JavascriptRavgeet DhillonView Answer on Stackoverflow