In this lecture, we're going to begin uploading the screenshot to fire bases storage service, unlike
the video, we don't have a file object.
Luckily, Firebase is very flexible.
Blobs are accepted by Firebase.
To recap, a blob is an object that acts as a wrapper around a file's binary data as long as Firebase
receives a file's binary data.
It'll be able to store it.
First, we need to create a function for converting our URLs back to blobs.
The URLs created by our app are blob URLs.
Long URLs point to our system's memory.
We're allowed to access our files through these URLs.
Let's create a function for handling this action.
Open the FFmpeg service file in your editor.
We're going to extract the logic for grabbing a blob through a URL in this service at the bottom of
the class.
Define an asynchronous function called blob from the URL.
And the argument list, we're going to accept a string called Earl.
Next, we can begin processing our URL, define a variable called response.
Its value will be the fetch function with the URL.
Normally we would run the fetch function with API URLs.
However, it's completely acceptable to fetch a file from a blob.
Modern browsers will understand the file is from the user's memory.
As long as the URL is in the correct format, a request can be made for the file.
Be sure to add the await keyword.
Afterward, create a variable called Blob.
Its value will be the response dot blob function with the await keyword.
The fetch function returns a response object, which contains information on the response and headers.
We're not interested in the headers.
We can grab the file by running the blob function.
The last step is to return the blob.
The function we've defined will create a blob from a URL.
It's important to understand the component does not have access to the blob object itself.
It only has the URL.
We need to create a function to grab the blob.
Let's begin using our function in the upload component class file.
Scroll down to the upload file function.
We're going to add the async keyword to our function.
The blob from the URL function is asynchronous.
Therefore, our function should be asynchronous to next.
Search for the clip path variable.
We're going to grab the blob after defining this variable.
But before we initiate and upload to Firebase after the variable create another variable called Screenshot
Blob, its value will be the this dot FFmpeg service dot blob from URL function, with the selected
screenshot property passed in.
It is an asynchronous function.
So add the await keyword.
Next, we need to give our file a name, Firebase is going to ask us for a name during the upload process,
create a variable called screenshot path.
The value will be the following screenshots slash clip file name dot PNG.
We're going to store our screenshots in a separate directory from our clips.
The name of the directory will be called screenshots.
Next, we're setting the name to the randomly generated I.D. with the PNG extension.
Everything is in order.
We can proceed to upload our file.
Initializing the file upload should occur.
After uploading the clip, Firebase can upload files in parallel.
The order doesn't matter, but I prefer to upload the video first before a screenshots.
Videos take longer to upload.
Called the this storage Typekit upload function with the screenshot path and screenshot blob variables
passed in.
The value returned by this function will be an object called task, storing this object will be necessary.
Otherwise, we won't be given updates on the status of the upload or are going to need this information
before redirecting the user to their clip.
Not doing so will cause issues.
Scroll to the top of the class.
Add a new optional property called Screenshot Task.
It'll be annotated with the angular fire upload task class.
Next, go back to the upload we've initiated.
We're going to restore the value returned by the upload function to these screenshot task property.
Before proceeding further, we should test our upload.
Go ahead and upload a file, I want you to go through the entire upload process.
After a few seconds, your upload should have been successful.
Let's check out the Firebase console to verify the screenshot was uploaded.
Open the Firebase console in another tab.
Navigate to the dashboard for the storage service.
Right away, we'll find these screenshots directory so far, so good.
Let's take a look inside.
There should be a single file.
We can click on it to preview the image.
Pat yourself on the back.
After almost an hour of work, we've successfully generated a screenshot, presented it to the user
and uploaded it to Firebase.
There are a couple of refinements we'll need to make.
Let's begin refining our solution in the next lecture.