DEV Community

Cover image for Implement file upload with Firebase Storage ๐Ÿ”ฅ in our Angular App: The simple way
Martina Kraus for Angular

Posted on • Updated on • Originally published at indepth.dev

Implement file upload with Firebase Storage ๐Ÿ”ฅ in our Angular App: The simple way

PRELUDE: This is the second article in a series of articles where my dear friend Siddharth(who's a fellow GDE in Angular & Web Tech) and I create KittyGram: A super-minimal Instagram Clone that allows uploading only Cat ๐Ÿฑ Photos.

Please find more information regarding the project overview and what we've implemented so far in our first article:

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 ๐Ÿพ

Tl;DR:

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:

Alt Text

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 AppMaterialModule:

...
import { MatCardModule } from '@angular/material/card';
import { MaterialFileInputModule } from 'ngx-material-file-input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
...

@NgModule({
  exports: [
    ...
    MatCardModule,
    MaterialFileInputModule,
    MatFormFieldModule,
    MatInputModule,
    MatProgressBarModule,
    ...
  ],
})
export class AppMaterialModule {}

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 mat-form-field.

Using reactive Forms ๐Ÿค“

So far so good, the next necessary step we need to take is importing the ReactiveFormsModule inside our AppModule:

...
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  ...
  imports: [
    ...
    ReactiveFormsModule,
  ],
  ...
})
export class AppModule {}

Nice, this enables us to use reactive forms inside our components.
Let's do it! ๐Ÿ’ช Let's implement our form to upload pictures:

create.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { AuthService } from '../../services/auth/auth.service';
import { UtilService } from '../../services/util/util.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.scss'],
})
export class CreateComponent implements OnInit, OnDestroy {
  destroy$: Subject<null> = new Subject();
  fileToUpload: File;
  kittyImagePreview: string | ArrayBuffer;
  pictureForm: FormGroup;
  user: firebase.User;

  constructor(
    private readonly authService: AuthService,
    private readonly formBuilder: FormBuilder,
    private readonly utilService: UtilService,
    ...
  ) {}

  ngOnInit() {
    this.pictureForm = this.formBuilder.group({
      photo: [null, Validators.required],
      description: [null, Validators.required],
    });

    this.authService.user$
      .pipe(takeUntil(this.destroy$))
      .subscribe((user: firebase.User) => (this.user = user));
}

  ngOnDestroy() {
    this.destroy$.next(null);
  }
}

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 .group({[..],[..]}) function.

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 image:

  private image(
    photoControl: AbstractControl,
  ): { [key: string]: boolean } | null {
    if (photoControl.value) {
      const [kittyImage] = photoControl.value.files;
      return this.utilService.validateFile(kittyImage)
        ? null
        : {
            image: true,
          };
    }
    return;
  }

And add it to the FormControl named photo:

this.pictureForm = this.formBuilder.group({
      photo: [
        null,
        [Validators.required, this.image.bind(this)],
      ],
      ...
    });

The Validator calls a UtilService and checks, if the uploaded file type is an image:

util.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UtilService {
  private imageFileTypes = [
    ...
    'image/apng',
    'image/bmp',
    'image/gif',
    'image/jpeg',
    'image/png',
    'image/svg+xml',
    ...
  ];

  validateFile(file: File): boolean {
    return this.imageOrVideoFileTypes.includes(file.type);
  }
}

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 userAvatar.

As the final step, inside the ngOninit function we also need to subscribe to the valueChanges Observable offered by each FormControl:

ngOnInit() {
    ...
    this.pictureForm
      .get('photo')
      .valueChanges.pipe(takeUntil(this.destroy$))
      .subscribe((newValue) => {
        this.handleFileChange(newValue.files);
      });
}

Every single time a user changes the input value, it will be emitted through this Observable.

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 handleFileChange function:

  handleFileChange([ kittyImage ]) {
    this.fileToUpload = kittyImage;
    const reader = new FileReader();
    reader.onload = (loadEvent) => (this.kittyImagePreview = 
    loadEvent.target.result);
    reader.readAsDataURL(kittyImage);
  }

We are also using the official FileReader for getting an image URL we can display inside an image tag. The readAsDataURL function fulfills this purpose, as it can be read in the documentation:

When the read operation is finished, the readyState becomes 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 ๐ŸฆŠ.

Awesome!
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:

create.component.html

<form
  *ngIf="user"
  class="form" 
  [formGroup]="pictureForm">
  <mat-card>
    <mat-card-header>
      <div mat-card-avatar>
        <img class="avatar" [src]="user.photoURL" />
      </div>
      <mat-card-title>Post a cute Kitty ๐Ÿ˜ป</mat-card-title>
      <mat-card-subtitle>{{ user.displayName }}</mat-card-subtitle>
    </mat-card-header>
    <img
      *ngIf="kittyImagePreview"
      class="preview-image"
      [src]="kittyImagePreview"
      alt="Cute Kitty Picture"
    />
    <mat-card-content>
      <mat-form-field appearance="outline" class="full-width">
         ...
      </mat-form-field>
      <mat-form-field appearance="outline" class="full-width">
         ...
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      ...
    </mat-card-actions>
  </mat-card>
</form>

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 create.component.ts folder.

Moving on, we see displaying the name and the avatar of the user inside the MatCardHeaderComponent.

Here we have the image tag where we'll see a small preview of our uploaded cat image

Inside the 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:

<mat-form-field appearance="outline" class="full-width">
  <mat-label>Photo of your cute Kitty</mat-label>
  <ngx-mat-file-input
       accept="image/*"
       formControlName="photo"
       placeholder="Basic outline placeholder"
      >
  </ngx-mat-file-input>
  <mat-icon matSuffix>folder</mat-icon>
</mat-form-field>

Do you remember that we added the MaterialFileInputModule? We needed it to have an input of 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.

The 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 FormControl:

<mat-form-field appearance="outline" class="full-width">
   <mat-label>Describe your Kitty</mat-label>
   <textarea
        formControlName="description"
        matInput
        placeholder="Describe your cute Kitty to us ๐Ÿ˜ป"
       >
   </textarea>
</mat-form-field>

To create the binding between the single FormControls photo and 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 FormControl.

By calling 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.

And also take a look here:

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 Develop
it will expand and some more menu items including Storage will appear.
Click on it and you will see something like this:

Alt Text

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:

Alt Text

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 @angular/fire/storage.

storage.service.ts

import {
  AngularFireStorage,
  AngularFireUploadTask,
} from '@angular/fire/storage';
import { from, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { switchMap } from 'rxjs/operators';

export interface FilesUploadMetadata {
  uploadProgress$: Observable<number>;
  downloadUrl$: Observable<string>;
}

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  constructor(private readonly storage: AngularFireStorage) {}

  uploadFileAndGetMetadata(
    mediaFolderPath: string,
    fileToUpload: File,
  ): FilesUploadMetadata {
    const { name } = fileToUpload;
    const filePath = `${mediaFolderPath}/${new Date().getTime()}_${name}`;
    const uploadTask: AngularFireUploadTask = this.storage.upload(
      filePath,
      fileToUpload,
    );
    return {
      uploadProgress$: uploadTask.percentageChanges(),
      downloadUrl$: this.getDownloadUrl$(uploadTask, filePath),
    };
  }

  private getDownloadUrl$(
    uploadTask: AngularFireUploadTask,
    path: string,
  ): Observable<string> {
    return from(uploadTask).pipe(
      switchMap((_) => this.storage.ref(path).getDownloadURL()),
    );
  }
}

So, we created a function which returns two Observables, exposing them for our CreateComponent to 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.

The upload() function takes two parameters: filePath and fileToUpload.

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 getDownloadURL.

So far so good. Let's now inject this service as a dependency in our create.component.ts and implement the postKitty() function.

  constructor(
    ...
    private readonly snackBar: MatSnackBar,
    private readonly storageService: StorageService,
    ...
  ) {}

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:

  postKitty() {
    this.submitted = true;
    const mediaFolderPath = `${ MEDIA_STORAGE_PATH }/${ this.user.email }/media/`;

    const { downloadUrl$, uploadProgress$ } = this.storageService.uploadFileAndGetMetadata(
      mediaFolderPath,
      this.fileToUpload,
    );

    this.uploadProgress$ = uploadProgress$;

    downloadUrl$
      .pipe(
        takeUntil(this.destroy$),
        catchError((error) => {
          this.snackBar.open(`${ error.message } ๐Ÿ˜ข`, 'Close', {
            duration: 4000,
          });
          return EMPTY;
        }),
      )
      .subscribe((downloadUrl) => {
        this.submitted = false;
        this.router.navigate([ `/${ FEED }` ]);
      });
  }

All we need to do is to subscribe to both Observables we are getting from our StorageService calling the uploadFileAndGetMetadata function.

As explained before the uploadProgress$ Observables just emits numbers.
So let's add the MatProgressbarComponent to our create.component.html
and inside our template we can subscribe to this Observable by using the async pipe as such:

...
<mat-progress-bar *ngIf="submitted" [value]="uploadProgress$ | async" mode="determinate">
</mat-progress-bar>
...

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 here:

GitHub logo martinakraus / KittyGramUpload

This respository demonstrates the image upload and storing them inside the Firebase Storage that we have in KittyGram

KittyGramAuth

This project was generated with Angular CLI version 9.0.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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.

Some final words ๐Ÿงก

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.

I hope you liked the article. If you did please feel free to react with a โ™ฅ๏ธ and/ or with a ๐Ÿฆ„. Also add it to your reading list ๐Ÿ”– just in case you might want to refer back to the code.

Also 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. ๐Ÿ’ช

One last thing, don't forget to follow Siddharth right here:

See you all hopefully soon ๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹

Icon Courtesy: AngularIO Press Kit | File Upload by LAFS from the Noun Project

Top comments (5)

Collapse
 
antoniocaroppos profile image
AntonioCaroppos • Edited

What a pity that this project isn't continued.
I hate it when promises are made and then forgotten.

I was looking forward to this very much:

"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."

Collapse
 
santoshyadavdev profile image
Santosh Yadav

Thanks for writing it, great article, looking forward to read more blog posts from you ๐Ÿ‘.

Collapse
 
shaaafi profile image
Md. Shafiul Islam

Nice tutorial

Collapse
 
akshaya222 profile image
Akshaya222

When will next part of this article will be released?

Collapse
 
mahmoudnassif profile image
mahmoud-nassif

what if I want to upload multiple images in the same path ?