105

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!

kramer65
  • 50,427
  • 120
  • 308
  • 488
  • 4
    `var base64result = reader.result.split(',')[1];` or `var base64result = reader.result.substr(reader.result.indexOf(',') + 1);` – Sani Huttunen Jun 18 '14 at 15:19

5 Answers5

203

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.

Sani Huttunen
  • 23,620
  • 6
  • 72
  • 79
  • 2
    Do we know for sure, that a comma will never occur in the base64 string it self? If so, very good solutions. – Max Mazur Oct 25 '16 at 07:38
  • 19
    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](https://en.wikipedia.org/wiki/Base64). – Sani Huttunen Oct 25 '16 at 10:05
  • Excellent. Thank you very much for your explanation. – Max Mazur Oct 25 '16 at 11:09
  • 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` – sonlexqt Jul 09 '17 at 15:19
  • which one is faster, will split search through the file or quit at the first? – tofutim Jun 10 '20 at 18:23
  • shouldnt the result to be cast to string before splitting ? -> const resultString = reader.result as string; after that we can do the split. – Buminda Jan 02 '21 at 01:05
  • @Buminda: That depends. `result` is `An appropiate string or ArrayBuffer based on which of the reading methods was used to initiate the read operation.`. See [documentation](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result). – Sani Huttunen Jan 03 '21 at 12:01
  • Isn't there a straightforward way to do this? – Kishore Sahasranaman Jun 11 '21 at 16:03
  • Running this in jsbench.me tells me that the substring is way way faster than string split. By a factor of 100 – Joost Aug 13 '21 at 12:41
26
let reader: FileReader = new FileReader();
 
 reader.onloaded = (e) => {
    let base64String = reader.result.split(',').pop();
 };

or

let base64String = /,(.+)/.exec(reader.result)[1];
Oleh Leskiv
  • 371
  • 3
  • 10
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];
kris_IV
  • 2,396
  • 21
  • 42
Dushan
  • 1,365
  • 20
  • 26
1

You could also do

var base64=reader.result.replace(/^data:image\/\w+;base64,/, "");
Nelson Bwogora
  • 2,225
  • 1
  • 18
  • 21
0

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

const base64 = reader.result.toString().replace(/^data:(.*,)?/, "");
Ravgeet Dhillon
  • 532
  • 2
  • 6
  • 24