0

I'm trying to use Laravel as a file server (protected for authorized user only) but I struggle with an issue.

My Laravel API delivers large files (90Mo +-) to my React app.

To send my file from Laravel, I used this:

return Storage::disk('public')->download('myFile.zip');

And I download the file in React with Axios + FileSaver:

 axios
      .get("https://url/to/api/", {
        method: "GET",
        mode: "cors",
        headers: {
          Authorization: `Bearer ${token}`,
          "Access-Control-Allow-Origin": true,
          Accept: "application/zip",
        },
        responseType: "arraybuffer",
      })
      .then(response => {
        const blob = new Blob([response.data], {
          type: "application/zip",
        });

        saveAs(blob, "myFile.zip");

     
      })
      .catch(err => {
        console.log(err);
      });

My issue is that one I clicked on the button that trigger the download, nothing happen until the file is fully downloaded in background THEN I can save or read the file as a "normal" download.

For small files it's not a big issue but when my file is like 90Mo + a bad connection and you can wait during a long moment in front of a screen doing nothing.

Any advices ?

Gouze
  • 23
  • 4

1 Answers1

0

Check that: https://www.npmjs.com/package/js-file-download

You should trigger FileDownload before it completes the download itself. Related: How to download files using axios

Jordan Miguel
  • 37
  • 7
  • I've already read that discussion and tried the solutions but it gives me the result I have right now. I have to wait that the whole file is loaded before I get the browser prompt to save the file. – Gouze Feb 11 '22 at 16:13