DEV Community

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

Posted on • Updated on

The Better Way of Sending Data to the Backend

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 that uploaind these types of data is a slow process, and it even becomes laggy when a large data is being upload at once.

When we want to upload a picture or audio to the backend, we can't just send it to the backend in their original format. Every picture or audio, has a binary format, which is first being converted to base64 format in the frontend, which is then being sent to the backend, and if you want to get the data again from the backend, then you can't show it on the frontend, in their base64 format, which means that with every GET request, the backend have to convert the data from the base64 to the binary, and then it perfomrs GET request.

You can cleary see, that it's a two time conversion. First from binary data to base64 data and then again from base64 to binary data, and eventually this process takes large data to upload slowly.

But, there's always a solution. What we have to do instead of converting it to base64 in the frontend, is sending binary data directly to the backend, which means that even backend don't have to convert it in any way, which makes the process fast.

But, now the question is that how to do that?

You can use FormData() constructor to send binary data directly to the backend.

At first, you have to create an instance of the formdata.

var formData = new FormData();
Enter fullscreen mode Exit fullscreen mode

and then you have to append the data to the formData.

formData.append('username', 'Chris');
Enter fullscreen mode Exit fullscreen mode

Let's take an example.

const sendAudioAsync = (audioChapter, index, audioBookId) => {
    message.warning(`Uploading audio ${index}`);

    const sendingAudio = new FormData();
    sendingAudio.append('audio', audioChapter?.audio); 
    sendingAudio.append('size', audioChapter?.audio?.size); 
    sendingAudio.append('name', audioChapter?.audio?.name); 
    sendingAudio.append('title', audioChapter?.title); 
    sendingAudio.append('time', audioChapter?.time);
    sendingAudio.append('index', index); 
}
Enter fullscreen mode Exit fullscreen mode

The above example is the real time example of the client I am working for, in which I have to send audio and its detail to the backend, and I used FormData to send it.

FormData is always in key value pair, and you have to put a name and the data as key value pair, if using FormData to send binary data directly to the backend.

Buy Me A Coffee

Discussion (14)

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 Author

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

The abover quora, will give your answer.

Collapse
manas_dev profile image
Manas Mishra Author

Did you ever send an image data to the backend?

Collapse
robert00 profile image
Robert • Edited on

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

Collapse
manas_dev profile image
Manas Mishra Author

yup. Recently came to know about it.

Thread Thread
manas_dev profile image
Manas Mishra Author

That's great.....

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 Author

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?

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
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 Author

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