1
00:00:00,120 --> 00:00:04,170
In this lecture, we're going to show the progress of the users upload.

2
00:00:04,470 --> 00:00:10,170
We want to be able to let the user know if their upload is in progress, a success or a failure.

3
00:00:10,500 --> 00:00:15,000
Accounting for these three scenarios will provide for a better user experience.

4
00:00:15,300 --> 00:00:21,990
For starters, we will add the upload progress to the alert component inside our upload component.

5
00:00:22,140 --> 00:00:26,910
We are initiating the upload with the upload function from the storage service.

6
00:00:27,270 --> 00:00:30,390
This function returns an object with observables.

7
00:00:30,600 --> 00:00:36,780
As you can imagine, these observables will push data related to the upload, including the progress

8
00:00:36,780 --> 00:00:37,620
of the upload.

9
00:00:37,920 --> 00:00:41,520
We should store the object in a variable called task.

10
00:00:43,910 --> 00:00:50,900
Next, we can immediately subscribe to an observable called percentages changes, the observable can

11
00:00:50,900 --> 00:00:53,000
be accessed by calling this function.

12
00:00:53,300 --> 00:00:56,000
After calling it, we can subscribe to it.

13
00:00:58,520 --> 00:01:04,790
During this subscription, we're going to store the progress in a property first, we need to create

14
00:01:04,790 --> 00:01:11,030
it at the top of the class to find a property called percentage with an initial value of zero.

15
00:01:13,510 --> 00:01:19,720
Back in the subscription, lets pass in an arrow function, the value pushed by the observable will

16
00:01:19,720 --> 00:01:21,760
be referred to as progress.

17
00:01:24,170 --> 00:01:30,770
We can hover our mouse over this argument to learn more about the value the value can either be a number

18
00:01:30,770 --> 00:01:31,910
or undefined.

19
00:01:32,090 --> 00:01:33,050
That's good to know.

20
00:01:33,320 --> 00:01:37,610
We will encounter an issue related to the type inside this function.

21
00:01:37,760 --> 00:01:41,690
We will update the percentage property to the progress property.

22
00:01:44,140 --> 00:01:46,960
As expected, TypeScript will throw an error.

23
00:01:47,290 --> 00:01:51,760
It does not allow for an undefined value to be assigned to this property.

24
00:01:52,060 --> 00:01:55,020
We can assert the type by adding the as keyword.

25
00:01:55,360 --> 00:01:57,850
The argument should be asserted as a no.

26
00:02:00,440 --> 00:02:07,340
After storing this value, we can update the alert component in the template to render this value switch

27
00:02:07,340 --> 00:02:11,950
over to the template and search for the alert component below the message.

28
00:02:11,990 --> 00:02:19,490
We will add another paragraph tag inside this tag add an expression to output the percentage property.

29
00:02:22,000 --> 00:02:25,240
After the expression, we should add the percent symbol.

30
00:02:25,510 --> 00:02:27,490
We could manually add this symbol.

31
00:02:27,730 --> 00:02:34,120
Alternatively, we can use a pipe angular exports, a pipe for formatting percent values.

32
00:02:34,390 --> 00:02:37,360
Let's apply the percent pipe to the expression.

33
00:02:39,930 --> 00:02:45,240
Before the value gets outputted, angular will upend the percent symbol to the pipe.

34
00:02:45,570 --> 00:02:47,760
Let's refresh the page in the browser.

35
00:02:50,410 --> 00:02:53,050
I'm going to attempt to upload a file.

36
00:02:55,580 --> 00:03:00,080
As the file is uploaded, we can see the percentage as clear as day.

37
00:03:00,440 --> 00:03:02,960
However, it's not formatted correctly.

38
00:03:03,260 --> 00:03:07,670
By default, the percent pipe will multiply the value by 100.

39
00:03:08,060 --> 00:03:12,140
Therefore, we will get an abnormally large percent value.

40
00:03:12,320 --> 00:03:17,720
We can fix this value by dividing the percentage by 100 to reverse the changes.

41
00:03:18,110 --> 00:03:22,090
Let's go back to the upload component class file in our editors.

42
00:03:24,560 --> 00:03:28,340
Divide the progress argument by 100 in the assignments.

43
00:03:30,780 --> 00:03:32,940
Let's try testing the upload again.

44
00:03:35,530 --> 00:03:42,130
Voila, we've successfully rendered the upload progress to the user in the next lecture, we're going

45
00:03:42,130 --> 00:03:46,000
to move on to handling errors and successful uploads.