In this lecture, we're going to adjust the upload progress in the alert box.
The upload progress will inform the user of the upload progress for the video.
That's where our problem begins.
It doesn't account for the progress of a screenshot upload we're uploading to files.
The progress should reflect both uploads.
Since we're dealing with uploads, we'll be dealing with double the observables.
It's going to be necessary to merge observables into a single observable.
Luckily, we have plenty of experience in this department.
Take a moment to think about which operator we'll need for this situation.
I'll give you a moment.
Have you picked one for this lecture?
We're going to use the combined latest operator to understand why.
Let's dig into the code.
Open the upload component class file.
With our other important statements, important a function called Combine latest from the R SJS package.
Next, scroll to the upload file function inside this function.
I want you to look for the percent changes observable.
The percent changes observable can be found on task objects.
It'll push a numeric value, which represents the current progress of an upload or using this value
to update the percentage property.
Currently, the subscription is applied to the clip upload.
We should update this subscription to the clip and screenshot uploads to avoid creating multiple subscriptions.
We can continue using a single subscription by applying the combined latest operator.
This operator will subscribe to multiple observables and stream it as one value if one observable pushes
the value.
This operator will push the latest values from all observables.
We're going to need all the latest values to calculate the percentage.
Let's wrap the percent changes operator with the combined latest operator.
Observables must be passed in as items to an array.
So let's wrap our values with an array.
Next, we need to pass him the percent changes observable from the screenshot task object.
The order does matter.
Our subscription will be provided with an array of values in the same order.
Speaking of our subscription, we should make some adjustments.
Let's add a body to the arrow function.
The progress argument is not going to represent a single value anymore and said it's going to store
the values pushed by both observables.
We should restructure them for readability.
Let's this structure the values to variables called flip progress and screenshot progress, respectively.
Next, we should check if both values are not empty.
If we hover our mouse over either variable, they can potentially be empty.
We won't be able to calculate the percentage if either variable is empty and a conditional statement.
Check if the variables are empty.
If one of them is empty, we'll return the function to cease execution.
If both variables have values, we can proceed to calculate the percentage defining variable called
total, its value will be the sum of both variables.
Next, we'll return the total variable divided by 200 of the values emitted by our observable will contain
a numeric value between zero and 100.
If the sum of both numbers is 200, we can assume the files have been uploaded successfully.
To calculate the percentage, we can divide the sum by 200.
After making those changes, try initiating a new upload in the browser.
As the upload progresses, we are given an accurate percentage, perfect or almost finished.
There's another observable in our function that needs to be updated.
Let's take care of that in the next lecture.