I am building my ReactJS SPA (single-page-application) webpage that includes a file upload function. Sometimes users need to upload a large file (over 5 GB) and it can easily take up above 20 or 30 minutes.

Currently, an upload is achieved by HTTP PUT request, and when the user uploads a file in the /new-files page, a UI box component will appear, showing the progress bar for the upload process.

While the file is uploading, I want the users to be able to:

1. Go to other pages (i am using react-router-dom), thus loading other components;
2. browser refresh/ reload the page;

and when the user comes back to /new-files page or when the page reload finishes, the user can still see the upload in progress.

Right now, when I refresh the page, it kills the PUT request that is doing the file upload.

How can I make the file upload with PUT request survive over functional component reload or page reload?

Is it even possible?

Maybe it is not possible for file upload with PUT request to survive over manual page refresh.

But I think it is possible to let users be able to click open other page components and come back to the file-upload page and still see the progress bar continuing.

Any suggestions?