1 00:00:00,120 --> 00:00:04,500 In this lecture, we going to handle the upload if it fails or succeeds. 2 00:00:04,740 --> 00:00:10,710 Before we begin writing code, let's discuss the behavior we wish to achieve if the upload fails. 3 00:00:10,860 --> 00:00:14,610 We should update the alert component to display an error message. 4 00:00:14,910 --> 00:00:18,600 The form should be enabled to allow the user to resubmit their clip. 5 00:00:18,930 --> 00:00:21,510 On the other hand, if the upload succeeds. 6 00:00:21,630 --> 00:00:23,820 We should display a success message. 7 00:00:24,090 --> 00:00:25,920 The form should remain disabled. 8 00:00:26,460 --> 00:00:29,010 There are other steps we will need to perform. 9 00:00:29,190 --> 00:00:32,009 For example, we need to update the database. 10 00:00:32,189 --> 00:00:33,930 Storing the file is not enough. 11 00:00:34,110 --> 00:00:37,260 We need to store information related to the upload. 12 00:00:37,470 --> 00:00:41,040 However, we're going to focus on displaying an error message. 13 00:00:41,280 --> 00:00:46,200 We'll get to other stuff in later lectures in the upload file function. 14 00:00:46,230 --> 00:00:50,910 We subscribed to the percentage changes observable from the task object. 15 00:00:51,270 --> 00:00:55,860 There's another observable available on this object called snapshot changes. 16 00:00:56,160 --> 00:01:00,900 The word snapshot is a term you'll come across in the documentation of Firebase. 17 00:01:01,200 --> 00:01:04,650 A snapshot represents the current status of the upload. 18 00:01:05,129 --> 00:01:07,950 It'll push values as the file is uploaded. 19 00:01:08,220 --> 00:01:11,430 It's similar to the percentage change is observable. 20 00:01:11,760 --> 00:01:15,720 The main difference is the type of information pushed by the observable. 21 00:01:16,020 --> 00:01:18,570 There's more information to read from the observable. 22 00:01:18,810 --> 00:01:23,010 Let's check it out below the percentage changes subscription. 23 00:01:23,160 --> 00:01:26,640 We will subscribe to these snapshot changes observable. 24 00:01:29,140 --> 00:01:31,150 Be sure you're calling it as a function. 25 00:01:31,360 --> 00:01:38,170 It's not a property, but a method inside these subscription, we all pass in the console live function. 26 00:01:40,590 --> 00:01:44,160 Let's try uploading a file with the developer tools opened. 27 00:01:46,630 --> 00:01:49,540 Dozens of snapshot objects get uploaded. 28 00:01:49,840 --> 00:01:52,030 Feel free to look inside any of them. 29 00:01:52,270 --> 00:01:56,410 They all contain the same properties under the delegate property. 30 00:01:56,590 --> 00:02:01,270 Firebase will provide us with the bytes transferred and total bytes of the file. 31 00:02:01,600 --> 00:02:05,680 We can use these properties to calculate the percentage of the upload. 32 00:02:06,010 --> 00:02:10,300 It's an alternative solution if you don't want to use the other observable. 33 00:02:10,750 --> 00:02:15,370 We won't be using this observable for that purpose, but it's nice to know our options. 34 00:02:15,670 --> 00:02:18,730 The most important property is the state property. 35 00:02:19,090 --> 00:02:22,600 The state property will tell us the current state of the upload. 36 00:02:22,900 --> 00:02:27,250 If the value is set to running, the upload is still in progress. 37 00:02:27,580 --> 00:02:30,580 Let's scroll down to the very bottom of the console. 38 00:02:30,910 --> 00:02:34,900 I want to check out the last object pushed by the observable. 39 00:02:37,380 --> 00:02:43,590 Upon completion, the last object will have a status of success, to be completely honest. 40 00:02:43,710 --> 00:02:46,350 We don't care about the other snapshot objects. 41 00:02:46,650 --> 00:02:49,770 All we're looking for is the upload to be completed. 42 00:02:49,890 --> 00:02:55,710 We should create an observable that await for the last snapshot to be pushed once pushed. 43 00:02:55,890 --> 00:02:57,930 We can display a success message. 44 00:02:58,200 --> 00:03:00,000 Let's go back to our editors. 45 00:03:02,410 --> 00:03:05,320 Accomplishing this task will be easier than you think. 46 00:03:05,590 --> 00:03:11,470 There's an operator for ignoring values pushed by an observable until the last value has been pushed. 47 00:03:11,740 --> 00:03:14,570 Let's give it a try at the top of the file. 48 00:03:14,590 --> 00:03:19,810 Let's import the last pipe from the R SJS operators package. 49 00:03:22,270 --> 00:03:28,960 Scroll back to the subscription in the upload file function before subscribing to these snapshot changes. 50 00:03:28,960 --> 00:03:31,330 Observable change the pipe function. 51 00:03:33,750 --> 00:03:36,990 Inside the pipe, we will add the last operator. 52 00:03:39,490 --> 00:03:46,270 This operator will ignore values pushed by the observable, a value will not be pushed until the observable 53 00:03:46,270 --> 00:03:51,550 completes, the last value pushed by the observable will be emitted from our pipeline. 54 00:03:51,850 --> 00:03:56,590 We can assume the file has been uploaded after the subscriber receives a value. 55 00:03:57,100 --> 00:04:04,270 Let's begin updating the alert component to render a success message or replace the console log function 56 00:04:04,270 --> 00:04:06,280 in the subscription with an object. 57 00:04:06,580 --> 00:04:10,720 Typically, we would pass in a single function to handle the value. 58 00:04:10,960 --> 00:04:13,960 However, we want to be able to handle errors. 59 00:04:14,290 --> 00:04:19,420 Errors can be caught by using object syntax inside this object. 60 00:04:19,570 --> 00:04:22,420 Let's define the next and error function. 61 00:04:22,720 --> 00:04:25,060 Both function should be error functions. 62 00:04:27,320 --> 00:04:33,320 We're defining them as arrow functions to prevent the context from changing the components properties 63 00:04:33,320 --> 00:04:37,940 won't be accessible unless we use arrow functions in the next function. 64 00:04:38,060 --> 00:04:41,570 We will accept the snapshot object as an argument. 65 00:04:44,150 --> 00:04:48,830 As for the error function, we will accept the error object as an argument. 66 00:04:51,320 --> 00:04:55,700 Inside the next function, we're going to upload a series of properties. 67 00:04:55,910 --> 00:05:01,940 First, we'll change the color of the alert component by setting the alert color property to green. 68 00:05:04,410 --> 00:05:09,900 Next, we will update the alert message property to the following value success. 69 00:05:10,080 --> 00:05:12,600 Your clip is now ready to share with the world. 70 00:05:15,060 --> 00:05:18,630 After updating these properties, we should hide the percentage. 71 00:05:18,930 --> 00:05:23,340 I don't think there's a point in showing the percentage if the upload was successful. 72 00:05:23,610 --> 00:05:28,320 We should add a property for toggling the percentage at the top of the class. 73 00:05:28,560 --> 00:05:33,510 Define a property called show percentage with an initial value of false. 74 00:05:36,060 --> 00:05:42,060 This property will be responsible for toggling the visibility of the percentage in the alert component. 75 00:05:42,480 --> 00:05:48,690 The percentage should become visible once an upload is initiated back in the upload file function. 76 00:05:48,840 --> 00:05:51,060 We will set this property to true. 77 00:05:51,420 --> 00:05:55,230 This update should occur during the initial phases of the function. 78 00:05:57,740 --> 00:06:03,710 Next, let's set this property to false in the next function of our subscription object. 79 00:06:06,250 --> 00:06:08,950 That should remove the percentage from the component. 80 00:06:09,250 --> 00:06:10,510 This won't work yet. 81 00:06:10,810 --> 00:06:15,130 We need to apply this property to the element wrapped around the percentage. 82 00:06:15,370 --> 00:06:17,020 We'll get to that in a moment. 83 00:06:17,230 --> 00:06:20,980 First, let's handle the errors emitted by our observable. 84 00:06:21,310 --> 00:06:24,070 An error will be emitted by the observable. 85 00:06:24,070 --> 00:06:29,950 If the upload fails in the error function, set the alert color property to red. 86 00:06:32,610 --> 00:06:38,070 Next, set the alert message property to the following value upload failed. 87 00:06:38,220 --> 00:06:39,630 Please try again later. 88 00:06:42,240 --> 00:06:46,680 We should enable the form by setting the in submission property to True. 89 00:06:49,280 --> 00:06:55,700 Unlike last time, we should enable the forum to allow users to submit the form again, they may want 90 00:06:55,700 --> 00:06:58,790 to try uploading the file if they encounter a problem. 91 00:06:59,060 --> 00:07:00,980 We should hide the percentage, too. 92 00:07:01,220 --> 00:07:03,350 It doesn't need to be displayed anymore. 93 00:07:03,650 --> 00:07:06,590 Set the show percentage property to false. 94 00:07:08,990 --> 00:07:11,930 Lastly, we're going to land the air object. 95 00:07:14,320 --> 00:07:18,010 We're not going to use the air object, but it is worth checking out. 96 00:07:18,250 --> 00:07:19,420 Our class is ready. 97 00:07:19,660 --> 00:07:26,250 The last step is to update the template to toggle the visibility of the percentage in the upload template. 98 00:07:26,380 --> 00:07:33,070 Search for the alert component on the second paragraph tag, add the NGF directive. 99 00:07:33,340 --> 00:07:36,490 The condition will be the show percentage property. 100 00:07:38,880 --> 00:07:39,660 We're finished. 101 00:07:39,810 --> 00:07:43,170 It's time to test our app, switch over to the browser. 102 00:07:43,410 --> 00:07:46,440 First, we're going to test a successful upload. 103 00:07:46,770 --> 00:07:48,930 Try uploading a valid file. 104 00:07:51,480 --> 00:07:52,380 Fantastic. 105 00:07:52,620 --> 00:07:59,040 The alert component is updated as expected before we can test the error, we should make it easy for 106 00:07:59,040 --> 00:08:00,270 an error to be thrown. 107 00:08:00,570 --> 00:08:03,750 We'll navigate the Firebase console in another tab. 108 00:08:04,820 --> 00:08:07,790 We'll want to modify these storage service rules. 109 00:08:10,320 --> 00:08:16,830 One of the conditions we created will limit the maximum upload size will change this rule to limit the 110 00:08:16,830 --> 00:08:19,500 maximum upload size to one megabyte. 111 00:08:22,110 --> 00:08:28,560 Firebase will throw an air if the file size is bigger than one megabyte in our application, upload 112 00:08:28,560 --> 00:08:31,530 an MP for file that exceeds the file limit. 113 00:08:37,049 --> 00:08:43,020 After a while, fire base will throw an error, the error function from our subscription object will 114 00:08:43,020 --> 00:08:43,710 be invoked. 115 00:08:44,039 --> 00:08:47,730 It'll update the alert component to render an error message. 116 00:08:48,060 --> 00:08:51,720 This response is the exact behavior we were hoping to achieve. 117 00:08:52,080 --> 00:08:54,570 Open the console and the developer tools. 118 00:08:54,840 --> 00:08:57,630 We launched the air object in the function. 119 00:09:00,240 --> 00:09:06,840 Upon inspecting it, we're provided with a couple of values or even provided a basic error message we 120 00:09:06,840 --> 00:09:08,220 could use on the front end. 121 00:09:08,520 --> 00:09:13,500 Just in case you wanted to create your own message, you could use the code they provided. 122 00:09:13,830 --> 00:09:17,340 The code property will tell you exactly what went wrong. 123 00:09:17,730 --> 00:09:23,370 We can take the UI a step further by checking the error code and displaying an appropriate message to 124 00:09:23,370 --> 00:09:23,970 the user. 125 00:09:24,240 --> 00:09:30,150 In the resource section of this lecture, I provide a link to the list of error codes you can receive. 126 00:09:32,680 --> 00:09:37,160 There are a lot of reasons why an upload may fail in our application. 127 00:09:37,180 --> 00:09:41,260 We won't bother checking the error code for the sake of simplicity. 128 00:09:41,380 --> 00:09:46,300 We will render a single universal error message that'll take care of the error. 129 00:09:46,570 --> 00:09:48,820 Let's go back to the Firebase console. 130 00:09:49,030 --> 00:09:50,710 We should revert the rules. 131 00:09:51,010 --> 00:09:54,550 The maximum file limit should be 25 megabytes. 132 00:09:54,790 --> 00:09:58,180 Be sure to publish the changes for them to take effect. 133 00:10:00,730 --> 00:10:06,490 Well, you're now able to change the UI based on if the upload was a success or failure. 134 00:10:06,820 --> 00:10:12,460 We achieved this effect by creating properties representing the current status of the upload. 135 00:10:12,700 --> 00:10:18,730 Finding those properties to the template and then changing those properties in the appropriate functions. 136 00:10:19,060 --> 00:10:21,820 We have completed the objective for this lecture.