reader.readAsDataURL resulting in a defectuous base64 string?

Question

I am using this javascript code to read and upload a file to server:

var reader  = new FileReader();
reader.onloadend = function() {
  var bytes = reader.result;
  var ext = file.name.split(".").pop();
  xhr.send("bytes="+bytes+"&type="+ext);
}
reader.readAsDataURL(file);

When I check which parameters are being sent to server (in the developer console), I see this:

https://i.sstatic.net/8Yrdp.jpg

which causes an Illegal base64 character error (I think caused by the spaces in the string).

Anyone knows how to fix that?

with this I got a base64 string too? I need those in the server side. — Kleber Mota
– Kleber Mota, Commented Jan 13, 2019 at 12:46
It doesn't, but you could use btoa to convert it afterwards. It's just an idea you could try ^^ — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Jan 13, 2019 at 12:49
I just tried that right now, but the same error happens (java.lang.IllegalArgumentException: Illegal base64 character 20) and the same spaces being shown in the string. — Kleber Mota
– Kleber Mota, Commented Jan 13, 2019 at 12:51

NikxDa · Accepted Answer · 2019-01-13 12:59:00Z

3

readAsDataURL doesn't produce a clean base64 string, but rather produces a string in the format:

data:[<mediatype>][;base64],<data>

This format is known as a Data URI. You can obtain the raw base64-data by splitting:

const base64 = reader.result.split (",").pop ()

If your data is still invalid, use readAsBinaryString (which returns a File/Blog) and then use window.btoa to convert it to a base64 string.

edited Jan 13, 2019 at 12:59

answered Jan 13, 2019 at 12:40

NikxDa

4,1951 gold badge30 silver badges49 bronze badges

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

5 Comments

Kleber Mota Over a year ago

I already doing that in the server side, after the data is sent, and that's what causing the error, because the base64-data have spaces which should not be there.

Kleber Mota Over a year ago

ok, another person suggested that in the comments, and I just tried this readAsBinaryString already, following his suggestion. But the same error happened.

NikxDa Over a year ago

Have you tried using btoa? Can you post your example image? I haven't experienced a problem like this before, readAsBinaryString should return valid binary data.

Kleber Mota Over a year ago

How I can run the example? I try download, but do not work on my machine (with chrome or firefox). In the web interface I don't find button to run the example.

NikxDa Over a year ago

It runs in the browser. Just open the console to see the result.

Collectives™ on Stack Overflow

reader.readAsDataURL resulting in a defectuous base64 string?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related