In this lecture, we're going to learn how to cancel the upload.
We've accomplished the task of uploading a file to Firebase.
There is an issue with the process that can be easily overlooked if you don't examine the developer
tools.
Let me show you the problem.
I'm currently on the upload page with the developer tools opened in the network panel.
I filtered the results to show x h r requests.
I'm going to upload a large file immediately after initiating the upload.
I'm going to navigate to another part of the application.
It doesn't matter which page.
After navigating to another page, you'll notice that the request is still ongoing.
Even the request to the database is made, navigating back to the upload page will show that the component
has been reset.
This behavior is important to understand when you navigate to another page.
The component from the previous page will get destroyed.
This applies to its children components, too.
We can prove this further by switching to the Angular Developer Tools Component tab.
I'll search for the upload component quickly.
The final property on this component is empty.
The file we've uploaded has been removed from our app.
Angular has destroyed the component, which has caused its properties to lose their values.
The purpose of destroying a component is to free memory on the user's machine.
This action will allow memory to be allocated elsewhere.
Angular does its part by cleaning up the application.
However, it doesn't clean everything for us.
Requests are not cancelled.
Simple requests won't tax the application, but a file upload can.
Transferring large amounts of data can each bandwidth and storage.
If the user navigates away from the page, we should cancel the request.
We can take advantage of angular lifecycle functions for components.
If a component gets destroyed, we will cancel the upload.
Switch over to your editor.
First, we're going to import the interface for the nji on destroy function.
It's an optional step, but it doesn't hurt to add it.
Meanwhile, we should replace the nji on init function from our component.
We aren't using it to begin with.
They replace the on init interface with the on destroy interface in the import statement from the angular
core package.
Next on the class definition, replace the on a niche interface with the on destroy interface.
Lastly, we can replace the energy on an IT function with the energy on destroy function.
This function will run before the component is destroyed.
We'll have access to the properties and methods to find in the component before they're destroyed during
this lifecycle function.
We're going to cancel the upload before the component is removed from the document.
Uploads can be cancelled through the task object.
This object is defined locally in the upload file function.
We're going to create a property for storing this object.
This way, we can access it outside of the function at the top of the file.
We're going to update the import statement for the angular slash fire slash compat slash storage package.
We'll include an interface called Angular Fire Upload Task.
Next, inside the class defining property called task annotated with this interface, we're going to
make this property optional.
Scroll down to the upload file function.
We're going to replace the task variable with the Beskar task property.
There are about three lines in this function that need to be replaced.
Let's go back to the energy on destroy function.
The task Objet comes with a method that we can call to cancel the upload and the life cycle function
called the this task.
Question marks cancel function.
This function will cease upload operations to Firebase.
We're adding the optional chaining operator because the task variable may be empty.
There isn't a point in calling the cancel function if the task object is not present.
We don't need to make further changes that should take care of it.
Let's try testing and upload again.
Be sure to have the network panel opened in the developer tools.
We want to verify that requests are getting cancelled after we've navigated away from the page.
Navigating away has cancelled the upload.
We can verify this by switching to the console panel in the developer tools.
If an upload is cancelled, our observable will throw an error, further inspection of this object will
show that the cause of the error was cancellation by the user.
Technically not an error because it's not something that breaks our application, but it's treated as
such by Firebase.
That's good to know, just in case you want to handle the cancellation further in the function.