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();

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

formData.append('username', 'Chris');

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); 
}

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.

Comments

[Randall]

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

[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.

[Manas Mishra]

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

The abover quora, will give your answer.

[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?

[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.

[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?

[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

[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

[Manas Mishra]

Did you ever send an image data to the backend?

[Robert]

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

[Manas Mishra]

yup. Recently came to know about it.

[Manas Mishra]

That's great.....

[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

[Manas Mishra]

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

[RalphMaas]

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