Have a client-side server in react that need to request files from backend server (kotlin + spring boot) to download them.
Using the request endpoint in Swagger, Postman and Insomnia, i can success download any file with any size.
In my client-side server, have a list of this files that download can be triggered by a click in an icon. I can download files that has less than 10mb with no error, but when file has more than 10mb, it fails with Failed to fetch
error.
Actually, it's a weird behavior. Let say i have a file named FILE A
that has under than 10mb and FILE B
with 25MB (is the max size allowed to upload). In first entried of the page, if i first request to download FILE B, it throw Failed to fetch
. Now, if first request is in FILE A and after FILE B, FILE B download is successed. I'm really confused what is going on here.
Code:
const options = { method: 'GET', headers: { "Authorization": `Bearer ${user?.token}` },};fetch(`http://localhost:8080/storage/download?fileName=${filePath}`, options) .then(function (response) { return response.blob(); }) .then(function (myBlob) { setSpinControl(false); const file = new Blob( [myBlob], { type: 'application/pdf' } ); const fileURL = URL.createObjectURL(file); if (window) { window.open(fileURL, '_blank'); } }) .catch((err) => { setSpinControl(false); console.log(err) });
Already tried some alternatives:
- Using axios (throw
Network Error
); - Using libraries as file-saver;
- Setting timeout to 9999999;
All achieve same behavior.
I read too that createObjectURL uses memory to perform download, but max size of a file is validated to be 25MB.
Some print of Network tab:
Any tips what i can do here?