In this lecture, we're going to add the final data to the database.
We could write the logic in the component.
Interacting with clips from the database will be a common action in our application.
We should outsource this logic into a service before adding the data.
Let's create a service.
Open the command line in your editor.
Let's run the following command Nji G Service Services slash clip.
The clip service will be globally available.
We're not going to store it inside the video module.
After creating the service, open the service class file.
Let's think about what we'll need.
First, we're going to need to inject the Firestorm service.
It's going to provide us with the methods for communicating with our database on top of the service.
We're going to need type checking.
We should be cautious with the type of data inserted into our database.
It's possible we may accidentally insert the wrong type of data to prevent this scenario from occurring.
We can constrain the data of our collection to a specific structure.
We have experience with this implementation.
We previously added types to the user's collection in our database.
The process will be very similar.
Let's get started at the top of the file.
We will import the angular fire store and angular fire store collection objects from the angular slash
fire slash compat slash fire store package.
The Firestorm service will expose methods for communicating with the database.
As for the collection class, it'll help us with adding types to our collection inside the class defining
public property called clips collection.
We are going to annotate this property with the collection class.
The property we've created will store the collection for the users uploads by storing it as a property.
We can skip the process of selecting the collection.
We can select it once, use it everywhere.
It's going to make our code more readable.
We're applying the collection type to enforce the type of data that can be added to the collection.
We can describe the data by using a generic to describe the data.
Let's create a model inside the model's directory.
Create a file called Clip Dot Model Dots.
Inside this file, we will export an interface called I Clip.
The object should describe the data that can be found inside the eclipse collection.
Every object should store the following properties unity display, name, title, file name and URL.
The types for these property should be sent to string.
Switch back to the service at the top of the file, import our new model.
Lastly, we will applying this model to the collection as a generic.
By adding this generic typescript will not allow us to add an object unless it defines the properties
in the interface.
This step is optional, but type checking should always be a priority.
After defining our property, we can inject the fire store service in the constructor functions arguments
at the service under an alias called DB.
Next, inside the constructor function update, the eclipse collection property to the DVD collection
function.
The collection function will select a collection from our database for this example.
The name of our collection will be called clips.
This collection doesn't exist, but that's perfectly fine, Firebase will create it for us.
Our collection is ready.
We will finalize the service by creating a function for adding a new clip to the collection defining
method called Create Clip.
It'll have an argument called data annotated with the eclipse model.
Lastly, inside the method, we will call the Fiscal Cliffs Collection Act and function with the data
passed in.
This operation is asynchronous.
We will add the async await keywords in the appropriate locations.
There are two functions for adding a document to a collection.
The first function is the set function.
This function is what we use to add the user to the user's collection.
The second function is called add.
The difference between the two is that the set function will allow you to assign a custom ID to the
document.
The add function will instruct Firebase to generate an ID for you.
We're going to call the add function because we don't care about setting a custom ID for the document.
It's quick and easy.
Our service is ready.
Let's inject it into the upload component at the top of the file.
Import the eclipse service.
Next in the constructor functions arguments, inject this service with an alias called Clips Service.
Lastly, scroll to the next function in our snapshot changes observable.
The Create clip method should be called after creating the clip object will pass it into the method.
Errors will arise because the UID and display name properties may be null by default, Firebase will
annotate these properties as strings or undefined values.
It's because the user may not be authenticated.
However, we know for a fact they are authenticated, otherwise they wouldn't be able to upload a file
to begin with.
We can fix this issue by asserting the types on both properties two strings with the as keyword.
We're finished.
Time to test our code.
Before we do go to the Firebase console and clear the storage.
We want to start with a fresh slate.
I have deleted the files in my app storage ahead of time.
Pause the video to do the same once you've got that taken care of.
Go ahead with uploading a file.
After some time has passed, we will receive a success message, go to the Firebase console to verify
that the file was uploaded.
It should be stored inside the eclipse directory.
Great.
The video is still being stored in the storage after verifying it's being stored.
Go to the database to confirm that the clip information was inserted.
Inside the eclipse collection, a new document was added.
It was assigned a random ID.
That's perfectly fine.
We don't need that custom ID at this time.
We're finished.
We've created an elegant solution for uploading videos.
There are many ways we can improve the upload process, but I don't want to spend too much time as I
have covered everything I wanted to cover.
There is one thing I want to add I want to create a fallback solution for users who aren't able to drag
and drop files for one reason or another.
We'll tackle this problem in an upcoming lecture.