0

I have an angular 9 component which is used to upload data(images) to the server. I want to prevent the component from refreshing on routing. I want the upload to continue even on changing routes. How do I achieve this??

Praveen Nat
  • 1
  • 4

1 Answers1

0

Most probably you want to implement the upload logic in a service (rather than component). Then you inject that service (which can be provided in parent component, or module, or even as singleton depending on your needs).

Then, your component tells the service to start the upload, and the upload will continue even if the user navigates away from the page and the component itself is destroyed.

Now, have in mind that this might be bad UX - if you see progress bar halfway there, and navigate away from the page you usually don't expect the upload to continue. Especially since that's what will happen if the user navigates outside of the SPA. But that's a different matter, and I'm no UX expert myself.

TotallyNewb
  • 3,884
  • 1
  • 11
  • 16
  • The thing is the file upload size to the server is more than 100GB and I want to allow my user to perform other tasks in my application while the upload continues :3 – Praveen Nat Jun 10 '20 at 12:22
  • Yeah, then definitely move the logic to the service. Then you can make the service emit information about status updates, and if needed have other component display the status updates independently on the current route. In case of such big files, you might also want to make this service responsible for watching navigation changes to outside the angular application and warn the user that it will stop the current upload. – TotallyNewb Jun 10 '20 at 13:52
  • navigation changes outside angular ?? I didn't understand that part? – Praveen Nat Jun 10 '20 at 16:15
  • When the user navigates to anywhere outside your application, e.g. google.com or anything else. This means that the upload will stop, since the whole page will be unloaded. For example, check https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes – TotallyNewb Jun 11 '20 at 13:20