Send large files from frontend to the backend

Himanshu Singh
3 min readMar 17, 2023

Recently, in one of my frontend interviews,

Interviewer — Suppose we are giving the user option to upload a file and save it. Then how will you send the file to the backend?
Me — We can directly send it in the body of a POST API call.

Interviewer — What if it is a large file? suppose, of 2GB.
Me — uhh! Maybe we can compress the file and then can split it into parts and then can send the parts one by one.

Interviewer — But how will you do it?
Me — I am not really sure. I haven’t experienced any problem like this so far.

One way of doing it

In javascript, we have something called FileReader. What we can do is, we can create a FileReader object and then we can read the uploaded file as an array buffer.

const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file.files[0]); // file.files[0] shows the uploaded file

After this, we can use the onload method of the file reader object, which is triggered once the file reading is completed.

const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file.files[0]); // file.files[0] shows the uploaded file
fileReader.onload = (event) => {}

--

--

Himanshu Singh
Himanshu Singh

Written by Himanshu Singh

I write blogs around React JS, JavaScript, Web Dev, and Programming. Follow to read blogs around them.