JS btoa() and static Uint8Array.toBase64() yielding different results. Why?

Posted by OkEffect71@reddit | learnprogramming | View on Reddit | 6 comments

I use gzip compression on my audio file blob from the client. If if use btoa on the compressed string and decode it, it returns the original compressed blob [31,139 etc.]. And the encoded string looks like this: MzEsMTM5LDgsMCwwLDAsMCwwLDAsMywxNzEsMTc0LDUsMCw2NywxOTEsMTY2LDE2MywyLDAsMCww. And i also can't decode it on my server using node:zlib, it returns "incorrect header check" error (whether i'm using unzip or gunzip doesn't make a difference).

But if i use toBase64() it looks like this: H4sIAAAAAAAAA6uuBQBDv6ajAgAAAA==, and when decoded, it returns some weird symbols (like unicode replace symbols). And i'm not sure where i read this, but aren't compressed base64 strings supposed to have padding? Do these methods need to be decoded differently? this string also can be decoded on my server, but it returns an empty object.

I've also tried to replicate this code from stackoverflow:

const obj = {};
const zip = zlib.gzipSync(JSON.stringify(obj)).toString('base64');const obj = {};
const zip = zlib.gzipSync(JSON.stringify(obj)).toString('base64');

and for decompressing:

const originalObj = JSON.parse(zlib.unzipSync(Buffer.from(zip, 'base64')));
const originalObj = JSON.parse(zlib.unzipSync(Buffer.from(zip, 'base64')));

But toString("base64") doesn't work on objects/arrays in my tests.

I'm really lost and i've been reading forums and documentations for hours now. Why does this happen?

[-]

kschang@reddit

I think you're misunderstanding some fundamentals.

btoa is meant to be used with its counterpart, atob, to make the string safe to be transmitted in case the transmission chops off the high bits. As MDN docs says:

You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the Window.atob() method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.

https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa

You should be just using the Uint8Array functions to decode Base64 stuff.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/toBase64

[-]

OkEffect71@reddit (OP)

he btoa() method of the Window interface creates a Base64-encoded ASCII string

then use the Window.atob() method to decode the data again.

I don't think i understand what you mean? It decodes from base64 into binary after btoa encoded the binary into base64. But suppose you are right, what should i be doing instead to encode/decode?

[-]

kschang@reddit

Okay, let's start from the beginning.

What are you trying to... encode? You said you have a blob... so binary, right? Raw binary?

What exactly are you trying to do with the blob? Just... look at it?

[-]

OkEffect71@reddit (OP)

gzip the blob string, then encode it in base64. Then send it to the server and save it to mySQL, so i can retrieve it in future. Then i need to decode it and ungzip it, but zlib port (pako) throws an error "incorrect header check". But the compressed decoded blob is valid, i just didn't have the mental energy to come up with a solution, because zlib needs a buffer on client side.

[-]

kschang@reddit

Okay, I'm starting to see the problem. But this is complicated, as you have to verify a couple different things:

Verify gzip / ungzip

Verify gzip + encode base64 / decode base64 + ungzip

Let's just say we can skip SQL read/write. You still need to prove both of the above steps (which are double-steps) to work, and it seems you're kinda stuck in the gzip/ungzip step.

I'd say... sleep on it. You need a break.

[-]

OkEffect71@reddit (OP)

nvm i've decided to use multiple cloud storage accounts and store audio link in mySQL