In this lecture, we're going to learn about a new operator called Fork Qoin.
It's going to help us handle the next step to uploading a screenshot before we do.
Let's talk about what our next step is.
Our files are being uploaded to Firebase.
However, the URL to our screenshot isn't being stored in the database.
We need to adjust our request to add the URL to the screenshots.
The solution is going to be similar to the percentage solution.
We need to wait for both uploads to complete.
After waiting for both uploads, we need to grab the URL to the screenshots.
Lastly, we can insert the screenshot URL into the document object.
There's going to be a small hurdle to get over.
Let's open the upload component class file to discover this hurdle.
In the upload file function, search for the snapshot changes observable.
You should be able to find it directly below the percent changes observable.
The snapshot changes observable will push values as the upload is in progress.
Completion occurs when the upload is finished in our pipeline.
We are waiting for the observable to finish by adding the last operator.
The last value emitted by the observable will be pushed to the subscriber.
We need to replicate this behavior with two observables.
Let's break this down into a list of requirements.
Firstly, we need to merge two observables into one.
We are going to subscribe to these snapshot changes observable from the video and screenshot uploads.
Secondly, we don't want to insert data into the database until both actions are complete.
Lastly, we need access to the latest values pushed by AL observables.
We need to build an observable and pipeline to satisfy these requirements.
There are different operators at our disposal to address our requirements.
There's one operator in particular that does everything in one.
It's called the fork joint operator.
It'll accept an array of observables.
Values are not pushed to the subscriber until all observables have been completed upon completion.
The latest values pushed by each observable are streams to the subscriber.
Let's give it a try.
At the top of the file import the fork joint operator from the Oryx Juice package.
Next, scroll back to these snapshot changes observable.
We're going to wrap the snapshot changes observable with the fork joint operator.
Observables must be passed in with an array wrapped around them.
Let's wrap the observable with an array.
Next, we should pass in the snapshot changes observable from the screenshot task object.
By passing in both observables, we are waiting for both uploads to finish inside our pipeline.
The last operator is redundant.
It's safe to remove it.
We can remove it from our import statements to.
Back in the pipeline, let's assess what we need next.
Inside the pipeline, we are subscribing to a different observable for the URL of the clip.
We can continue to use the Switch Map operator to change observables.
However, what about the URL for the screenshots?
We're going to need it for our app once again to observables will need to be merged into one.
We can reuse the fork.
Join Operator.
Before we do, we should create a reference to the screenshots.
References will ship with methods for grabbing the URL to a file in Firebase is storage service.
I want you to search for the clip reference variable.
You should be able to find it by scrolling up.
Under this variable, we're going to create a variable called screenshot reference.
Its value will be the this dot storage dot rep function.
Next pass in the screenshot path variable.
The value returned by this function will expose an observable for retrieving the download URL.
Let's subscribe to this observable.
Go back to the pipeline inside the pipeline.
We're going to wrap the get download URL observable with the fork join operator.
The observable should be wrapped with an array.
Lastly, we will a. get download URL observable from the screenshot reference object.
To recap, we're combining two observables there, the same observable, but for different files.
We're awaiting for Firebase to give us the URLs to both files after we've received them.
We will push them onto the subscriber.
The last step in this process is to update our subscription to include the URL for the screenshots.
Let's rename the argument to you URLs in the subscription.
Next, let's structure the earl's argument into two variables called clip URL and screenshot URL.
Afterward, the clip object needs to be updated as a reminder, the clip object gets inserted into the
database.
We should add the clip URL and screenshot URL variables to this object.
The URL properties should be sent to the clip URL variable.
As for the screenshot, Earl Variable, we will assign this variable to a property called screenshot
URL.
The compiler is going to complain because the screenshot URL property is not defined in the model.
The object is annotated with the eclipse model.
This model will need to be updated to reflect the changes.
Open the eclipse model file.
In the interface ad, the screenshot URL property annotated with the string type.
We're finished.
Let's try uploading a file.
Hopefully, this will be our last test.
After a few seconds, the upload is complete.
Let's verify the screenshots storage in the database.
I want you to open the database in another tab.
Inside the clips collection, you should find the new item in the database.
The latest document contains a URL to the screenshot.
That's awesome.
Let's finish things up in the following lecture.