DEV Community

Cover image for The Better Way of Sending Data to the Backend

The Better Way of Sending Data to the Backend

Manas Mishra on January 08, 2022

If you are a front-end developer, who ever worked on picture uploading, video uploading or audio uploading to the backend, then you should know tha...
Collapse
 
mistval profile image
Randall

People transmit images as base64? Why? I've always used FormData or octet stream, so the start of this post confused me.

Collapse
 
zyabxwcd profile image
Akash

I think one use case could be when you want to your APIs to use JSON. Sending form data means your API is consuming formats other than JSON. Also sending data in a form has some limitations I guess. Its best for as the name suggest forms. What if sending media is involved in a process that doesn't included one. I faced a scenario, and that is when I leaned about base64. I cant exactly remember what factors were stopping me from using form but I wanted to send and receive image data and I could not use a form so I had to follow this approach. The good thing is that you don't have to manually convert the image to base64 inside the browser. There is a web API that exposes a property named dataUrl that already contains the base64 form of the uploaded file.

Collapse
 
manas_dev profile image
Manas Mishra

quora.com/What-is-the-purpose-of-b...

The abover quora, will give your answer.

Collapse
 
momander profile image
Martin Omander

Interesting article. Whenever I read an article saying "do it this way because it's faster" I wish the author would have run performance tests and included the results. If they haven't run tests, how do they know that it's actually faster?

Collapse
 
manas_dev profile image
Manas Mishra

I haven't run the test, but I faced this issue, while developing a scenario, where we have to upload multiple audiobook chapters, and the former way of sending and receiving data is crashing the website, and taking a lot of time (while uploading 500MB of one episode), but with the later version with FormData, its workinh smoothly.

Collapse
 
momander profile image
Martin Omander

Great! What you described is an informal performance test. "Uploading a 500 MB file used to crash the server, but with the new code that doesn't happen any more". Perhaps add a couple of sentences about that to the article?

Thread Thread
 
womingzi profile image
jieshao

Uploading a 500 MB file used to crash the server, but with the new code that doesn't happen any more

If it is more or less, what happens?

LOL Beans

Collapse
 
kingkeith profile image
Keef

Especially as converting base64 to/from binary data is super fast - the slow part comes because base64 representation is a lot bigger, so if uploading/downloading in that format, it will use more bandwidth and thus take longer

Collapse
 
manas_dev profile image
Manas Mishra

Did you ever send an image data to the backend?

Collapse
 
robert00 profile image
Robert • Edited

There is an example there on how to send file
developer.mozilla.org/en-US/docs/W...

Collapse
 
manas_dev profile image
Manas Mishra

yup. Recently came to know about it.

Thread Thread
 
manas_dev profile image
Manas Mishra

That's great.....

Collapse
 
birowo profile image
birowo

how about using ajax. ajax can upload binary data. my example, upload image file:
gitlab.com/birowo/latihan/-/blob/m...
image will previewed and compressed before upload. all information about image : file name etc. put on url

Collapse
 
manas_dev profile image
Manas Mishra

AJAX could be a good alternative too for uploading binary data.

Collapse
 
ralphmaas profile image
RalphMaas

What about gRPC, with this it is possible to send bidirectional binary data from client to backend