You can up your UX game by adding things like skeleton loaders, loaders, progress bars to async operations. For example uploading files to a server might take time due to network connection or file size. We can also Monitor Firebase upload progress using @angular/fire package. And that is what we gonna do in this article.
The end result of our app would look like as below
This article has a loose dependence on last two articles where I have discussed how to create a simple todo app with firebase and than implement firebase storage. You can read them to know about the journey or continue with this article as a standalone tutorial.
The starting point of our project is fire storage branch ionic ng todo github branch. You can switch to upload progress branch to get the final result.
We will go with the existing markup. We do need some css generated content that is covered next
We need to style the loader but question is which one. Ion-loading accepts a cssClass property. We can use that to give it our own class. Let’s add that in our code
Ionic loading component is part our component but not in the dom. It exist somewhere else in the scope of the project. It can be confirmed below. That’s why we can’t style it in our HomePage component.
The styles should go in
global.scss for this purpose. CSS pseudo-elements can be used to add content to markup without touching HTML. Especially in our case, for aesthetic purpose.
Let’s code the firebase upload progress
Most of the modifications are happening in one method i-e
The highlighted lines show we are using the
upload method of firebase storage to monitor firebase upload progress. We have gave up the
put method so let’s adjust accordingly.
percentageChanges method does all the heavy lifting. We just listen to it and update the –percent-uploaded CSS custom property of ion-loading. Remember in the CSS section, this property is inherited by it’s ::after pseudo-element. Hence we style that blue bar to update on the UI.
There is one more thing in our uploadFile method. We need to return the promise when we are done with the upload task. So that we can resume our program execution.
getDownloadURL logic is now moved to addTodo method.
This is last change we have made to achieve firebase upload progress. Most of the above code is quite self explanatory. The UploadTask returns a promise which can be queried to get downloadURL.
The good thing that we have achieved is the nondestructive feature addition. I have learned how well we can add features to existing code without breaking. Thanks to this Refactoring Book.