React : "DOMException: String contains an invalid character" error while encoding in base64

Question

I'm facing a new kind of error and I'm kind of stuck here. I have a lightweight code editor in my app and I send its content (typed by the user) to my back-end, encoding it in base64. First I used codeContent.toString("base64"); method and it worked like a charm with this kind of testing content:

let numberTest = 52;
let arrayTest = [63, 24, 75];
let sumTest = numberTest + arrayTest[0];

The problem here, is that I can't decode it back to UTF-8 when I want to retrieve this code from my API, I get some gibberish.

So I tried this method instead: atob(codeContent); . In this case, if I type a simple text like: test , the encoded version looks fine ( µë- ), but the content is still empty in my backend after my POST. And if I try this with a simple line of JS like let testNumber = 52; , then I get this error: "DOMException: String contains an invalid character"

To sum it up: I'm a little lost, what's the good way to encode my text to base64 and retrieve it afterwards?

Answer 1

My problem was that I understood atob and btoa wrong: I thought b toa decoded FROM base64, but it's the other way around. So, encoding TO base64:

btoa(unescape(encodeURIComponent(str)));

And decoding base64:

decodeURIComponent(escape(window.atob(str)));