In this lecture, we going to handle the upload if it fails or succeeds.
Before we begin writing code, let's discuss the behavior we wish to achieve if the upload fails.
We should update the alert component to display an error message.
The form should be enabled to allow the user to resubmit their clip.
On the other hand, if the upload succeeds.
We should display a success message.
The form should remain disabled.
There are other steps we will need to perform.
For example, we need to update the database.
Storing the file is not enough.
We need to store information related to the upload.
However, we're going to focus on displaying an error message.
We'll get to other stuff in later lectures in the upload file function.
We subscribed to the percentage changes observable from the task object.
There's another observable available on this object called snapshot changes.
The word snapshot is a term you'll come across in the documentation of Firebase.
A snapshot represents the current status of the upload.
It'll push values as the file is uploaded.
It's similar to the percentage change is observable.
The main difference is the type of information pushed by the observable.
There's more information to read from the observable.
Let's check it out below the percentage changes subscription.
We will subscribe to these snapshot changes observable.
Be sure you're calling it as a function.
It's not a property, but a method inside these subscription, we all pass in the console live function.
Let's try uploading a file with the developer tools opened.
Dozens of snapshot objects get uploaded.
Feel free to look inside any of them.
They all contain the same properties under the delegate property.
Firebase will provide us with the bytes transferred and total bytes of the file.
We can use these properties to calculate the percentage of the upload.
It's an alternative solution if you don't want to use the other observable.
We won't be using this observable for that purpose, but it's nice to know our options.
The most important property is the state property.
The state property will tell us the current state of the upload.
If the value is set to running, the upload is still in progress.
Let's scroll down to the very bottom of the console.
I want to check out the last object pushed by the observable.
Upon completion, the last object will have a status of success, to be completely honest.
We don't care about the other snapshot objects.
All we're looking for is the upload to be completed.
We should create an observable that await for the last snapshot to be pushed once pushed.
We can display a success message.
Let's go back to our editors.
Accomplishing this task will be easier than you think.
There's an operator for ignoring values pushed by an observable until the last value has been pushed.
Let's give it a try at the top of the file.
Let's import the last pipe from the R SJS operators package.
Scroll back to the subscription in the upload file function before subscribing to these snapshot changes.
Observable change the pipe function.
Inside the pipe, we will add the last operator.
This operator will ignore values pushed by the observable, a value will not be pushed until the observable
completes, the last value pushed by the observable will be emitted from our pipeline.
We can assume the file has been uploaded after the subscriber receives a value.
Let's begin updating the alert component to render a success message or replace the console log function
in the subscription with an object.
Typically, we would pass in a single function to handle the value.
However, we want to be able to handle errors.
Errors can be caught by using object syntax inside this object.
Let's define the next and error function.
Both function should be error functions.
We're defining them as arrow functions to prevent the context from changing the components properties
won't be accessible unless we use arrow functions in the next function.
We will accept the snapshot object as an argument.
As for the error function, we will accept the error object as an argument.
Inside the next function, we're going to upload a series of properties.
First, we'll change the color of the alert component by setting the alert color property to green.
Next, we will update the alert message property to the following value success.
Your clip is now ready to share with the world.
After updating these properties, we should hide the percentage.
I don't think there's a point in showing the percentage if the upload was successful.
We should add a property for toggling the percentage at the top of the class.
Define a property called show percentage with an initial value of false.
This property will be responsible for toggling the visibility of the percentage in the alert component.
The percentage should become visible once an upload is initiated back in the upload file function.
We will set this property to true.
This update should occur during the initial phases of the function.
Next, let's set this property to false in the next function of our subscription object.
That should remove the percentage from the component.
This won't work yet.
We need to apply this property to the element wrapped around the percentage.
We'll get to that in a moment.
First, let's handle the errors emitted by our observable.
An error will be emitted by the observable.
If the upload fails in the error function, set the alert color property to red.
Next, set the alert message property to the following value upload failed.
Please try again later.
We should enable the form by setting the in submission property to True.
Unlike last time, we should enable the forum to allow users to submit the form again, they may want
to try uploading the file if they encounter a problem.
We should hide the percentage, too.
It doesn't need to be displayed anymore.
Set the show percentage property to false.
Lastly, we're going to land the air object.
We're not going to use the air object, but it is worth checking out.
Our class is ready.
The last step is to update the template to toggle the visibility of the percentage in the upload template.
Search for the alert component on the second paragraph tag, add the NGF directive.
The condition will be the show percentage property.
We're finished.
It's time to test our app, switch over to the browser.
First, we're going to test a successful upload.
Try uploading a valid file.
Fantastic.
The alert component is updated as expected before we can test the error, we should make it easy for
an error to be thrown.
We'll navigate the Firebase console in another tab.
We'll want to modify these storage service rules.
One of the conditions we created will limit the maximum upload size will change this rule to limit the
maximum upload size to one megabyte.
Firebase will throw an air if the file size is bigger than one megabyte in our application, upload
an MP for file that exceeds the file limit.
After a while, fire base will throw an error, the error function from our subscription object will
be invoked.
It'll update the alert component to render an error message.
This response is the exact behavior we were hoping to achieve.
Open the console and the developer tools.
We launched the air object in the function.
Upon inspecting it, we're provided with a couple of values or even provided a basic error message we
could use on the front end.
Just in case you wanted to create your own message, you could use the code they provided.
The code property will tell you exactly what went wrong.
We can take the UI a step further by checking the error code and displaying an appropriate message to
the user.
In the resource section of this lecture, I provide a link to the list of error codes you can receive.
There are a lot of reasons why an upload may fail in our application.
We won't bother checking the error code for the sake of simplicity.
We will render a single universal error message that'll take care of the error.
Let's go back to the Firebase console.
We should revert the rules.
The maximum file limit should be 25 megabytes.
Be sure to publish the changes for them to take effect.
Well, you're now able to change the UI based on if the upload was a success or failure.
We achieved this effect by creating properties representing the current status of the upload.
Finding those properties to the template and then changing those properties in the appropriate functions.
We have completed the objective for this lecture.