1 00:00:00,090 --> 00:00:03,690 In this lecture, we're going to learn how to cancel the upload. 2 00:00:03,940 --> 00:00:07,950 We've accomplished the task of uploading a file to Firebase. 3 00:00:08,280 --> 00:00:13,770 There is an issue with the process that can be easily overlooked if you don't examine the developer 4 00:00:13,770 --> 00:00:14,370 tools. 5 00:00:14,640 --> 00:00:16,129 Let me show you the problem. 6 00:00:16,620 --> 00:00:21,960 I'm currently on the upload page with the developer tools opened in the network panel. 7 00:00:22,110 --> 00:00:25,750 I filtered the results to show x h r requests. 8 00:00:26,100 --> 00:00:31,080 I'm going to upload a large file immediately after initiating the upload. 9 00:00:31,230 --> 00:00:34,470 I'm going to navigate to another part of the application. 10 00:00:34,920 --> 00:00:36,840 It doesn't matter which page. 11 00:00:39,260 --> 00:00:44,330 After navigating to another page, you'll notice that the request is still ongoing. 12 00:00:44,690 --> 00:00:51,410 Even the request to the database is made, navigating back to the upload page will show that the component 13 00:00:51,410 --> 00:00:52,490 has been reset. 14 00:00:52,880 --> 00:00:57,800 This behavior is important to understand when you navigate to another page. 15 00:00:58,010 --> 00:01:01,250 The component from the previous page will get destroyed. 16 00:01:01,580 --> 00:01:04,489 This applies to its children components, too. 17 00:01:04,819 --> 00:01:10,100 We can prove this further by switching to the Angular Developer Tools Component tab. 18 00:01:12,730 --> 00:01:15,550 I'll search for the upload component quickly. 19 00:01:18,080 --> 00:01:20,990 The final property on this component is empty. 20 00:01:21,290 --> 00:01:24,360 The file we've uploaded has been removed from our app. 21 00:01:24,710 --> 00:01:30,380 Angular has destroyed the component, which has caused its properties to lose their values. 22 00:01:30,680 --> 00:01:35,510 The purpose of destroying a component is to free memory on the user's machine. 23 00:01:35,900 --> 00:01:39,450 This action will allow memory to be allocated elsewhere. 24 00:01:39,980 --> 00:01:43,130 Angular does its part by cleaning up the application. 25 00:01:43,310 --> 00:01:46,190 However, it doesn't clean everything for us. 26 00:01:46,460 --> 00:01:48,140 Requests are not cancelled. 27 00:01:48,440 --> 00:01:53,000 Simple requests won't tax the application, but a file upload can. 28 00:01:53,360 --> 00:01:57,440 Transferring large amounts of data can each bandwidth and storage. 29 00:01:57,710 --> 00:02:02,330 If the user navigates away from the page, we should cancel the request. 30 00:02:02,840 --> 00:02:07,250 We can take advantage of angular lifecycle functions for components. 31 00:02:07,490 --> 00:02:11,180 If a component gets destroyed, we will cancel the upload. 32 00:02:11,480 --> 00:02:13,160 Switch over to your editor. 33 00:02:15,700 --> 00:02:20,740 First, we're going to import the interface for the nji on destroy function. 34 00:02:21,040 --> 00:02:24,220 It's an optional step, but it doesn't hurt to add it. 35 00:02:24,550 --> 00:02:29,890 Meanwhile, we should replace the nji on init function from our component. 36 00:02:30,370 --> 00:02:32,380 We aren't using it to begin with. 37 00:02:32,740 --> 00:02:39,640 They replace the on init interface with the on destroy interface in the import statement from the angular 38 00:02:40,150 --> 00:02:41,200 core package. 39 00:02:43,610 --> 00:02:50,420 Next on the class definition, replace the on a niche interface with the on destroy interface. 40 00:02:52,860 --> 00:02:58,890 Lastly, we can replace the energy on an IT function with the energy on destroy function. 41 00:03:01,420 --> 00:03:04,600 This function will run before the component is destroyed. 42 00:03:04,930 --> 00:03:11,260 We'll have access to the properties and methods to find in the component before they're destroyed during 43 00:03:11,260 --> 00:03:12,670 this lifecycle function. 44 00:03:12,820 --> 00:03:17,830 We're going to cancel the upload before the component is removed from the document. 45 00:03:18,130 --> 00:03:21,250 Uploads can be cancelled through the task object. 46 00:03:21,820 --> 00:03:25,900 This object is defined locally in the upload file function. 47 00:03:26,380 --> 00:03:29,740 We're going to create a property for storing this object. 48 00:03:29,980 --> 00:03:34,970 This way, we can access it outside of the function at the top of the file. 49 00:03:34,990 --> 00:03:43,000 We're going to update the import statement for the angular slash fire slash compat slash storage package. 50 00:03:43,330 --> 00:03:47,260 We'll include an interface called Angular Fire Upload Task. 51 00:03:49,650 --> 00:03:57,120 Next, inside the class defining property called task annotated with this interface, we're going to 52 00:03:57,120 --> 00:03:58,830 make this property optional. 53 00:04:01,350 --> 00:04:03,840 Scroll down to the upload file function. 54 00:04:04,110 --> 00:04:09,030 We're going to replace the task variable with the Beskar task property. 55 00:04:09,450 --> 00:04:13,260 There are about three lines in this function that need to be replaced. 56 00:04:20,279 --> 00:04:23,460 Let's go back to the energy on destroy function. 57 00:04:23,820 --> 00:04:30,150 The task Objet comes with a method that we can call to cancel the upload and the life cycle function 58 00:04:30,240 --> 00:04:32,540 called the this task. 59 00:04:32,580 --> 00:04:34,920 Question marks cancel function. 60 00:04:37,580 --> 00:04:41,090 This function will cease upload operations to Firebase. 61 00:04:41,360 --> 00:04:46,400 We're adding the optional chaining operator because the task variable may be empty. 62 00:04:46,850 --> 00:04:52,130 There isn't a point in calling the cancel function if the task object is not present. 63 00:04:52,760 --> 00:04:56,510 We don't need to make further changes that should take care of it. 64 00:04:56,780 --> 00:04:58,850 Let's try testing and upload again. 65 00:04:59,300 --> 00:05:03,350 Be sure to have the network panel opened in the developer tools. 66 00:05:03,620 --> 00:05:09,490 We want to verify that requests are getting cancelled after we've navigated away from the page. 67 00:05:12,020 --> 00:05:14,660 Navigating away has cancelled the upload. 68 00:05:14,900 --> 00:05:19,700 We can verify this by switching to the console panel in the developer tools. 69 00:05:22,100 --> 00:05:28,490 If an upload is cancelled, our observable will throw an error, further inspection of this object will 70 00:05:28,490 --> 00:05:32,480 show that the cause of the error was cancellation by the user. 71 00:05:32,840 --> 00:05:38,510 Technically not an error because it's not something that breaks our application, but it's treated as 72 00:05:38,510 --> 00:05:40,040 such by Firebase. 73 00:05:40,400 --> 00:05:45,680 That's good to know, just in case you want to handle the cancellation further in the function.