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!

var base64result = reader.result.split(',')[1]; or var base64result = reader.result.substr(reader.result.indexOf(',') + 1); — Sani Huttunen
– Sani Huttunen, Commented Jun 18, 2014 at 15:19

Sani Huttunen · Accepted Answer · 2014-06-18 15:28:49Z

213

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.

edited Jun 18, 2014 at 15:28

answered Jun 18, 2014 at 15:23

Sani Huttunen

24.4k7 gold badges78 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Max Mazur Over a year ago

Do we know for sure, that a comma will never occur in the base64 string it self? If so, very good solutions.

Sani Huttunen Over a year ago

Yes we know for sure. Base64 encoding uses the characters [a-z, A-Z, 0-9, +, /] to encode. = is also used for padding. See Base64.

Max Mazur Over a year ago

Excellent. Thank you very much for your explanation.

sonlexqt Over a year ago

Thanks ! Before reading this answer I used this: var base64result = reader.result.match(/^data:.+\/(.+);base64,(.*)$/)[2] which is way, way slower. I guess the complexity of RegEx operations are much more comparing to String.split

tofutim Over a year ago

which one is faster, will split search through the file or quit at the first?

|

Oleh Leskiv · Accepted Answer · 2022-03-14 11:04:24Z

28

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

or

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

edited Mar 14, 2022 at 11:04

answered Feb 9, 2017 at 8:56

Oleh Leskiv

3913 silver badges10 bronze badges

1 Comment

Juan Saravia Over a year ago

I really like the .pop() option vs all other options.

kris_IV · Accepted Answer · 2022-06-21 16:49:50Z

6

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];

edited Jun 21, 2022 at 16:49

kris_IV

2,4642 gold badges26 silver badges43 bronze badges

answered Oct 21, 2019 at 4:48

Dushan

1,5851 gold badge28 silver badges36 bronze badges

Comments

Nelson Bwogora · Accepted Answer · 2021-10-25 13:48:16Z

1

You could also do

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

answered Oct 25, 2021 at 13:48

Nelson Bwogora

2,4092 gold badges21 silver badges21 bronze badges

1 Comment

ÄR Âmmãř Żąîñh Over a year ago

this is only for images

Ravgeet Dhillon · Accepted Answer · 2022-05-25 10:23:07Z

0

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

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

answered May 25, 2022 at 10:23

Ravgeet Dhillon

6022 gold badges12 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to strip type from Javascript FileReader base64 string?

5 Answers 5

9 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related