In this lecture, we will finish this section by deleting these screenshots from the database and storage.
If the user deletes a clip, the screenshot should be deleted too.
Otherwise we'll be paying for storage we're not using.
Let's quickly solve this issue to get started.
Open the ion clip model file.
Firstly, we need to store the name of the screenshot file in our documents.
Otherwise, we won't be able to find them.
Our model should have a property for this data on the interface and a property called screenshot file
name annotated with the string type.
Next, we need to update the upload component, this component is where we are creating the documents
will need to update the object before insertion.
Open the upload component class file.
Inside the class, search for the clip object inside the upload file function.
This object needs to be updated with the screenshot file name property, the value for this property
should be the following clip file name dot PNG.
As a reminder, the clip file name, variable stores, the unique generated name of the file, we're
appending the extension to make it clear it's an image.
There's one more step we need to update the function for deleting the clip from our app.
We outsourced this logic to the clip service.
Let's open this file.
Search for the delete clip function.
Inside this function, we can reuse the code for deleting a video.
Let's create a variable called screenshot reference.
Its value will be the this dat storage script ref function.
References point to a file in the storage, we can delete a file after we've selected it from the storage.
Before we do, we need to provide the path to the file pass in the following value.
Screenshots slash clip dot screenshot file name.
Lastly, we can call the screenshot reference dot delete function with the await keyword will delete
the screenshot after deleting the video.
We're finished.
I'm going to quickly upload a new video.
I'll be right back.
All right.
I'm back.
Time for the true test.
I'm going to delete this file from the Manage page.
After doing so, let's check out the storage in the Firebase console.
The files may not refresh after making a change.
We need to manually refresh the page.
These screenshots trajectory will disappear.
Don't worry.
This behavior is completely normal if you only had one file in this directory.
Firebase is not a massive fan of empty directories.
We're officially finished with the upload form.
With the power of WebAssembly, we were able to capture high quality screenshots from a user's video.
Feel free to expand on our solution.
Try to make it your own.
Before moving on, I recommend uploading a couple of videos.
I'm going to do so before proceeding to the next section.
I'll see you there.