1
00:00:00,180 --> 00:00:06,689
In this lecture, we're going to store the final data or able to store the file in these storage successfully.

2
00:00:06,960 --> 00:00:09,840
However, we don't know who uploaded the file.

3
00:00:10,110 --> 00:00:14,220
Crucial information such as the title isn't being stored either.

4
00:00:14,490 --> 00:00:18,180
In this case, we should store this information in the database.

5
00:00:18,420 --> 00:00:22,740
We're going to continue working inside the upload component class file.

6
00:00:23,130 --> 00:00:28,350
Specifically, we want to store the data in the database if the upload was a success.

7
00:00:28,710 --> 00:00:32,460
There isn't a point in storing the data if the upload was a failure.

8
00:00:32,820 --> 00:00:35,130
We're going to update our next function.

9
00:00:35,400 --> 00:00:41,580
This part of the process should occur before updating the alert component, even though the upload is

10
00:00:41,580 --> 00:00:42,090
finished.

11
00:00:42,240 --> 00:00:44,190
We're not finished with storing the data.

12
00:00:44,490 --> 00:00:49,890
We don't want to let the user assume they can accept the application when we haven't saved the data

13
00:00:49,890 --> 00:00:50,250
yet.

14
00:00:50,580 --> 00:00:53,820
It makes sense to display that information last.

15
00:00:54,300 --> 00:01:00,360
We're going to start by creating an object representing the data we'd like to store in the database

16
00:01:00,720 --> 00:01:02,790
at the beginning of the next function.

17
00:01:02,980 --> 00:01:05,129
Define a constant called clip.

18
00:01:07,680 --> 00:01:10,110
There are a couple of things will want to store.

19
00:01:10,350 --> 00:01:14,400
First, the ID of the user should be stored in the database.

20
00:01:14,700 --> 00:01:19,630
It's going to help us connect the file with the uploader information about the user.

21
00:01:19,630 --> 00:01:22,800
It can be retrieved through the authentication service.

22
00:01:23,190 --> 00:01:29,850
The authentication service will need to be injected into the component at the top of the file import

23
00:01:29,850 --> 00:01:37,890
the angular fire off service from the angular slash fire slash compat slash off package.

24
00:01:40,460 --> 00:01:47,960
There's another object we're going to import called Firebase from the Firebase slash compat slash app

25
00:01:47,960 --> 00:01:48,680
package.

26
00:01:53,440 --> 00:01:56,350
We're importing this package to grab an interface.

27
00:01:56,560 --> 00:02:02,560
It's not required, but interfaces will give us a list of available properties and methods on a given

28
00:02:02,560 --> 00:02:03,190
object.

29
00:02:03,520 --> 00:02:09,729
Next in our class, let's define our property called user with an initial value of no.

30
00:02:12,280 --> 00:02:16,780
The type for this variable will be Firebase Dot user or no.

31
00:02:19,320 --> 00:02:25,280
We will be storing the user locally in the component next, scroll to the constructor function.

32
00:02:25,630 --> 00:02:31,950
Inject the authentication service into our component will refer to the service as off.

33
00:02:34,530 --> 00:02:41,010
If we want to access the user's data, we need to subscribe to the user observable from this service.

34
00:02:41,370 --> 00:02:44,280
A subscription should be initiated immediately.

35
00:02:44,640 --> 00:02:51,150
Otherwise, we may not have the users data by the time the upload has been completed in the constructor

36
00:02:51,150 --> 00:02:51,690
function.

37
00:02:51,840 --> 00:02:54,210
Subscribe to the user observable.

38
00:02:56,740 --> 00:03:03,460
The U-value pushed by the observable will be an object called user, let's pass in a function to accept

39
00:03:03,460 --> 00:03:04,450
this object.

40
00:03:06,930 --> 00:03:11,730
Inside the function, we will set the user property to the user argument.

41
00:03:14,250 --> 00:03:19,200
It's possible the object pushed by the observable may contain a no value.

42
00:03:19,530 --> 00:03:24,060
We are going to assume the object will never be null because of our route guards.

43
00:03:24,420 --> 00:03:28,980
Visitors will not be able to access this page if they're not authenticated.

44
00:03:29,340 --> 00:03:33,900
We can safely assume the observable will always push a user object.

45
00:03:34,230 --> 00:03:36,240
Let's go back to our next function.

46
00:03:36,750 --> 00:03:40,200
In the clip, Object will add a property called UID.

47
00:03:40,770 --> 00:03:44,550
Set it to this dot user dot uid.

48
00:03:47,440 --> 00:03:54,010
The user object represents the current user logged into the application since the ID is unique.

49
00:03:54,190 --> 00:03:57,730
It's perfect for associating the user with their uploads.

50
00:03:58,090 --> 00:04:06,130
The ID gets generated when users create accounts afterward will store the display name, create a property

51
00:04:06,130 --> 00:04:07,570
called display name.

52
00:04:07,810 --> 00:04:11,860
Said it to this dot user dot display name.

53
00:04:14,400 --> 00:04:20,459
The name of the user will be displayed on the page for clips storing their name will come in handy when

54
00:04:20,459 --> 00:04:24,030
we start working on this page after storing the name.

55
00:04:24,180 --> 00:04:31,660
Let's add the title of the clip at a property called title with the following value this Dutch title

56
00:04:32,070 --> 00:04:32,790
value.

57
00:04:35,320 --> 00:04:41,530
The title of the video is being stored in a form control, we can access the value directly through

58
00:04:41,530 --> 00:04:42,430
this object.

59
00:04:42,670 --> 00:04:49,690
Up next, we will store the name of the file at a property called file name with the following value

60
00:04:49,900 --> 00:04:52,780
clip file name dot amp for.

61
00:04:56,400 --> 00:05:02,700
There's one final piece of information will want to store the URL to the file should be stored in this

62
00:05:02,700 --> 00:05:03,330
object.

63
00:05:03,630 --> 00:05:07,590
We can't play the clip if we don't know where it's stored publicly.

64
00:05:07,980 --> 00:05:10,230
This is where things are going to get tricky.

65
00:05:10,560 --> 00:05:14,970
The URL is not easily accessible unless we create a reference.

66
00:05:15,270 --> 00:05:21,150
A reference object points to a specific file in our storage by creating a reference.

67
00:05:21,330 --> 00:05:24,840
We will be able to retrieve information about the file.

68
00:05:25,470 --> 00:05:29,850
To be clear, we're not creating a reference when we initiate an upload.

69
00:05:30,210 --> 00:05:33,090
We're simply telling Firebase to upload a file.

70
00:05:33,450 --> 00:05:35,910
Creating a reference is a separate action.

71
00:05:36,210 --> 00:05:38,940
Luckily, creating a reference is easy.

72
00:05:39,210 --> 00:05:44,070
Below the task, variable create a variable called clip reference.

73
00:05:46,470 --> 00:05:54,030
Next, set this variable to the following value this stock storage dot Ref. Clip Path.

74
00:05:56,630 --> 00:06:00,020
The ref function will create a reference to a file.

75
00:06:00,230 --> 00:06:04,610
Once again, a reference is an object that points to a specific file.

76
00:06:04,910 --> 00:06:08,360
A reference can be created before the upload is complete.

77
00:06:08,720 --> 00:06:14,240
If the file doesn't exist, Firebase will create a temporary placeholder for you.

78
00:06:14,870 --> 00:06:19,490
After grabbing a reference, we can access a public URL to the file.

79
00:06:19,940 --> 00:06:24,800
Here's the problem we need to subscribe to an observable to get this value.

80
00:06:25,070 --> 00:06:28,940
We're already subscribing to an observable to monitor the upload.

81
00:06:29,240 --> 00:06:31,820
Another subscription will need to be performed.

82
00:06:32,120 --> 00:06:34,340
I want you to think about this for a moment.

83
00:06:34,550 --> 00:06:37,400
We've explored this scenario a few times already.

84
00:06:37,700 --> 00:06:45,160
We can use the Switch Map operator to subscribe to an inner observable at the top of the file import

85
00:06:45,170 --> 00:06:50,210
the Switch Map operator from the SJS operators package.

86
00:06:52,650 --> 00:06:58,030
Next, go back to the snapshot changes observable inside the pipeline.

87
00:06:58,050 --> 00:07:00,990
We will add the Switch Map operator.

88
00:07:03,580 --> 00:07:08,860
Inside this operator pass in a function, we're not going to accept the snapshot.

89
00:07:09,130 --> 00:07:12,870
We don't need it to ground the URL inside this function.

90
00:07:12,880 --> 00:07:16,420
Return the following value clip ref dot.

91
00:07:16,540 --> 00:07:18,310
Get download URL.

92
00:07:20,900 --> 00:07:26,690
The get download DRL function returns and observable by returning this observable.

93
00:07:26,840 --> 00:07:31,850
The Switch Map operator will subscribe and push the value from the subscription.

94
00:07:32,210 --> 00:07:35,270
We are losing the snapshot, but that's perfectly fine.

95
00:07:35,540 --> 00:07:38,670
We aren't going to need it in the next function.

96
00:07:38,690 --> 00:07:40,230
Let's update the argument.

97
00:07:40,250 --> 00:07:41,630
Name two you URL.

98
00:07:44,210 --> 00:07:52,580
Next, inside the clip object had this argument to the object, we can use iOS as shorthand syntax for

99
00:07:52,580 --> 00:07:54,560
adding properties to an object.

100
00:07:54,890 --> 00:07:58,580
After adding this value, let's log the clip object.

101
00:08:01,140 --> 00:08:05,580
We're going to verify the values of this object inside the browser.

102
00:08:05,730 --> 00:08:09,300
Try uploading a file with the developer tools opened.

103
00:08:11,890 --> 00:08:16,030
After a few moments, the clip object should be logged in the console.

104
00:08:16,330 --> 00:08:20,500
Looking closely, it contains the information related to the upload.

105
00:08:20,770 --> 00:08:21,400
Perfect.

106
00:08:21,670 --> 00:08:24,610
This object is ready to be added to the database.

107
00:08:24,880 --> 00:08:28,000
Let's handle this action in the following lecture.