In this article, we'll cover the feature of uploading files to a Firebase Storage Bucket using Firebase Storage and Reactive Forms in Angular. You'll get the best learning experience out of this article, if you have a basic understanding of Angular, Angular Material and Firebase is relevant.
If you already took some steps inside Angular development together with Angular Material and like to know more about it, this article is absolutely perfect for you.
I've also added a Tl;DR; below if you would like to directly jump to a specific section of my article.
- Using the ReactiveFormsModule
- Setting up Angularfire Storage
- To be continued
Perfect! Let's go ahead and start implementing our feature to upload cute cat pictures.
Using the ReactiveFormsModule
As we previously have set up our Angular Application, we also already created the
CreateComponent and added the belonging
/create route to enable navigation.
But how can we upload our cute cat image with a super cute description? We also might need a proper validation of the uploaded files to ensure the file format is indeed an image.
This sounds like a lot we need to consider, but let's do it one step at a time.
Let’s first create the whole UI of our
CreateComponent so it will look similiar to this:
Adding needed AngularMaterialModules to our AppMaterialModule
Since we will use Input forms, a small progress bar and wrap it up all together inside a nice Display card we need to import the following AngularMaterialModules as well inside our
IMPORTANT You might have recognized that we also imported another Module called
MaterialFileInputModule from ngx-material-file-input
This was crucial for having an input with
type=file being used inside the Angular Material
Using reactive Forms
So far so good, the next necessary step we need to take is importing the
ReactiveFormsModule inside our
Nice, this enables us to use reactive forms inside our components.
Let's do it! Let's implement our form to upload pictures:
First, let’s inject the
FormBuilder. It helps us to create a
FormGroup that structures our whole form. Since we just need the photo and a small description we'll just add two
FromControls to our
That said, we also pass a default Value inside the
FormControls (which is
null in our case) and one or many Form Validator/s, which are helping us, to validate the user input.
By doing so, we can either pass a Built-in Validator shipped by the
@angular/forms module (Like the Required one we are using here) or implementing a custom Validator.
Since we want to be sure that the uploaded file is actually an image type we do need to implement this as a custom Validator.
Let's call this validator
And add it to the
The Validator calls a
UtilService and checks, if the uploaded file type is an image:
If the evaluation of the user input fails by one of our Validators, the whole form - and of course the assigned
FormControl itself - will turn immediately into an
invalid state, hence we can react according to the thrown error. We'll come back to this point later inside our template code.
Apart from the Form Validation we also
subscribe to the
authService for fetching all the user data, like the
displayName or the
As the final step, inside the
ngOninit function we also need to
subscribe to the
Observable offered by each
Every single time a user changes the input value, it will be emitted through this
And what do we want to do as soon as an image is uploaded?
We want to see a preview of it, right? So let’s implement the
read operation is finished, the
DONE, and the loadend is triggered.
At that time, the
result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.
Great, this is exactly what we needed
And do not forget:
Since we are subscribing to all these Observables, we also need to
unsubscribe from it. Following the
takeUntil pattern described in this article by Jan-Niklas Wortmann we avoid memory leaks like a.
Since we implemented the first important steps inside our
create.component.ts file we should move to the
create.component.html. file. So let's go!
First we'll add all Material Components we need:
As you can see we created a form and inserted the
MatCardComponent as a child component to it. This form has a property binding to the related
pictureForm which is the
FormGroup we created already inside the
Moving on, we see displaying the name and the avatar of the user inside the
Here we have the
image tag where we'll see a small preview of our uploaded cat image
mat-card-content tag we'll now add our two
MatFormFieldComponents one for having the file input and one textfield for our image description.
Let's start with the first one:
Do you remember that we added the
MaterialFileInputModule? We needed it to have an
type=file with the look and feel of Material Design.
This module exports the
ngx-mat-file-input component. And this is exactly what we are using here.
accept="image/*" property helps to prefilter the files that can be selected from the dialog.
Now, we just need to add a
textarea HTML tag for our second
To create the binding between the single FormControls
descriptions to the corresponding HTML tag we just need to set the
formControlName property accordingly.
The Angular reactive forms provides us a really easy way of displaying error messages beneath the associated
pictureForm.controls['photo'].hasError(‘..’) we immediately will be informed if one of our added Validators throws an error due to an invalid user input.
This enables us to put it inside a
*ngIf=".." directive and wrapping it inside a
MatErrorComponent, which already has an out of the box styling for displaying error messages:
<-- Error messages for image FormControl --> <mat-error *ngIf="pictureForm.controls['photo'].hasError('required')"> Please select a cute Kitty Image </mat-error> <mat-error *ngIf="pictureForm.controls['photo'].hasError('image')"> That doesn't look like a Kitty Image to me </mat-error> <-- Error messages for description FormControl --> <mat-error *ngIf="pictureForm.controls['description'].hasError('required')"> You <strong>SHOULD</strong> describe your Kitty </mat-error>
To ensure the user can't click the submit button with an invalid form, we also need to bind the
disabled property to the
invalid state of the whole form. That being said the button will be disabled as long as any evaluation of our
Validators will return an error.
<mat-card-actions> <button mat-raised-button color="primary" [disabled]="pictureForm.invalid || submitted" (click)="postKitty()" > Post Kitty </button> </mat-card-actions>
I know you have recognized the function
postKitty() inside the button click event handler. And I'm pretty sure you are eager to know how we actually upload a cute kitty image to the Firebase Storage.
So let's go ahead and figure out how we can do that, shall we?
Setting up Angularfire Storage
In the first article we already setup up our Firebase project. Please feel free to go back if you haven't created the Firebase project yet. I'll wait here
Also, if you are completely new to Firebase, consider taking a glance into this awesome YouTube Playlist.
Enabling the Firebase Storage
To enable the Firebase Storage we need to go back to the
Firebase Console with the same Google Account you have set up the Firebase project.
On the left Navigation click on the menu item
it will expand and some more menu items including
Storage will appear.
Click on it and you will see something like this:
After clicking on the
Get started Button you'll be guided through a small wizard asking you regarding some read or write access restrictions. But for now we don't need to consider this, so we can leave the default values there.
Closing the wizard by clicking on the
done button and after maybe waiting for a few seconds, you should see something like this:
Well done! You have now set up your Firebase Storage bucket to be filled with cute cat images 🎉.
That was easy, wasn't it?
Of course there's nothing in it yet. But I promise, as soon as we upload our first cute cat images, the files and folders will be created automatically inside this Firebase Storage bucket.
Creating the StorageService inside our App
The last nail in the coffin would be to create the actual connection between our Firebase Storage and the submission of our form.
We also need a way to inform our users about the progress of the file upload via a prograss bar.
We can wrap all this business logic inside a service, which we'll call
StorageService. Let's create it by calling the following command:
ng g s services/storage/storage
You might think this could be really tricky, but trust me it's not.
Most of the heavy lifting is already done and is exposed as the
AngularFireStorage service that we import from the package
So, we created a function which returns two Observables, exposing them for our
subscribe to it.
If you look closely, we get the
AngularFireUploadTask by calling the
upload() function on the
AngularFireStorage service that we injected as a dependency.
It provides us an Observable by calling
percentageChanges() on it. It is emitting numbers. And as you already correctly guessed we can use these numbers to show the progress on our progress bar.
upload() function takes two parameters:
The first parameter represents the path to the file inside our Firebase Storage, and of course, the second parameter is the actual image we'll store on this path. As we need to have a unique file path, we can use the recent timestamp for it as well.
As a return value, we get a promise, but since we want to use Observables overall we need to create it by calling the RxJS operator
from. It converts various other objects such as Arrays and Promises into Observables.
Since we just need to wait for this Observable to be resolved and we are more interested in the inner Observable that is emitted by calling the
getDownloadURL, we need to use the RxJS operator
switchMap to switch to the so-called inner Observable and returning it instead.
By calling the
ref function of our
AngularFireStorage we've injected, we create an AngularFire wrapped Storage Reference. This object creates Observables methods from promise-based methods, such as
So far so good. Let's now inject this service as a dependency in our
create.component.ts and implement the
Let's also add a cool
MatSnackBar we need for displaying success or error messages to our users.
And now the last missing piece of code:
All we need to do is to
subscribe to both Observables we are getting from our
StorageService calling the
As explained before the
uploadProgress$ Observables just emits numbers.
So let's add the
MatProgressbarComponent to our
and inside our template we can
subscribe to this Observable by using the
async pipe as such:
If the upload was successful we want to navigate back to the
FeedComponent. And if something went wrong we'll catch the Error with the help of the RxJS operator
catchError. To handle errors like this and not inside the
.subscribe() callback gives us the option to deal with errors without actually cancelling the whole stream.
In our case, we'll use our
snackBar service sending an error message as a small toast to the user (giving Feedback is always important) and returning EMPTY which immediately emits a complete notification.
As you remember correctly we need to define our
mediaFolderPath over here.
Let's create a
storage.const.ts file to define this const:
export const MEDIA_STORAGE_PATH = `kittygram/media/`;
And this is it
We are done Great job!
Our Application is ready and set up for uploading any kind of images we want, and also posting a small description to it
You can find source-code of the project on GitHub
To be continued
Uploading images was a crucial feature for KittyGram. But this is just the beginning. We now want to store the download URL along with some other details about this post to some sort of a database so that we can use it to populate our feed. Our feed will also have features like infinite scroll of all the great cat pictures we have stored in the database. And that is exactly what we are going to do in our next article. So stay tuned and I will update this article with a link to it, once Siddharth finishes writing it
Thank you so much for staying with me to the very end and reading the whole article. I am really grateful to Siddharth Ajmera for proofreading this article and collaborating with me on this project.
If there were points you weren't able to understand: Please feel free to comment down below and I'll be more than happy to help you out. 💪