In this lecture, we're going to store the final data or able to store the file in these storage successfully.
However, we don't know who uploaded the file.
Crucial information such as the title isn't being stored either.
In this case, we should store this information in the database.
We're going to continue working inside the upload component class file.
Specifically, we want to store the data in the database if the upload was a success.
There isn't a point in storing the data if the upload was a failure.
We're going to update our next function.
This part of the process should occur before updating the alert component, even though the upload is
finished.
We're not finished with storing the data.
We don't want to let the user assume they can accept the application when we haven't saved the data
yet.
It makes sense to display that information last.
We're going to start by creating an object representing the data we'd like to store in the database
at the beginning of the next function.
Define a constant called clip.
There are a couple of things will want to store.
First, the ID of the user should be stored in the database.
It's going to help us connect the file with the uploader information about the user.
It can be retrieved through the authentication service.
The authentication service will need to be injected into the component at the top of the file import
the angular fire off service from the angular slash fire slash compat slash off package.
There's another object we're going to import called Firebase from the Firebase slash compat slash app
package.
We're importing this package to grab an interface.
It's not required, but interfaces will give us a list of available properties and methods on a given
object.
Next in our class, let's define our property called user with an initial value of no.
The type for this variable will be Firebase Dot user or no.
We will be storing the user locally in the component next, scroll to the constructor function.
Inject the authentication service into our component will refer to the service as off.
If we want to access the user's data, we need to subscribe to the user observable from this service.
A subscription should be initiated immediately.
Otherwise, we may not have the users data by the time the upload has been completed in the constructor
function.
Subscribe to the user observable.
The U-value pushed by the observable will be an object called user, let's pass in a function to accept
this object.
Inside the function, we will set the user property to the user argument.
It's possible the object pushed by the observable may contain a no value.
We are going to assume the object will never be null because of our route guards.
Visitors will not be able to access this page if they're not authenticated.
We can safely assume the observable will always push a user object.
Let's go back to our next function.
In the clip, Object will add a property called UID.
Set it to this dot user dot uid.
The user object represents the current user logged into the application since the ID is unique.
It's perfect for associating the user with their uploads.
The ID gets generated when users create accounts afterward will store the display name, create a property
called display name.
Said it to this dot user dot display name.
The name of the user will be displayed on the page for clips storing their name will come in handy when
we start working on this page after storing the name.
Let's add the title of the clip at a property called title with the following value this Dutch title
value.
The title of the video is being stored in a form control, we can access the value directly through
this object.
Up next, we will store the name of the file at a property called file name with the following value
clip file name dot amp for.
There's one final piece of information will want to store the URL to the file should be stored in this
object.
We can't play the clip if we don't know where it's stored publicly.
This is where things are going to get tricky.
The URL is not easily accessible unless we create a reference.
A reference object points to a specific file in our storage by creating a reference.
We will be able to retrieve information about the file.
To be clear, we're not creating a reference when we initiate an upload.
We're simply telling Firebase to upload a file.
Creating a reference is a separate action.
Luckily, creating a reference is easy.
Below the task, variable create a variable called clip reference.
Next, set this variable to the following value this stock storage dot Ref. Clip Path.
The ref function will create a reference to a file.
Once again, a reference is an object that points to a specific file.
A reference can be created before the upload is complete.
If the file doesn't exist, Firebase will create a temporary placeholder for you.
After grabbing a reference, we can access a public URL to the file.
Here's the problem we need to subscribe to an observable to get this value.
We're already subscribing to an observable to monitor the upload.
Another subscription will need to be performed.
I want you to think about this for a moment.
We've explored this scenario a few times already.
We can use the Switch Map operator to subscribe to an inner observable at the top of the file import
the Switch Map operator from the SJS operators package.
Next, go back to the snapshot changes observable inside the pipeline.
We will add the Switch Map operator.
Inside this operator pass in a function, we're not going to accept the snapshot.
We don't need it to ground the URL inside this function.
Return the following value clip ref dot.
Get download URL.
The get download DRL function returns and observable by returning this observable.
The Switch Map operator will subscribe and push the value from the subscription.
We are losing the snapshot, but that's perfectly fine.
We aren't going to need it in the next function.
Let's update the argument.
Name two you URL.
Next, inside the clip object had this argument to the object, we can use iOS as shorthand syntax for
adding properties to an object.
After adding this value, let's log the clip object.
We're going to verify the values of this object inside the browser.
Try uploading a file with the developer tools opened.
After a few moments, the clip object should be logged in the console.
Looking closely, it contains the information related to the upload.
Perfect.
This object is ready to be added to the database.
Let's handle this action in the following lecture.