Firebase - View Images in List/ Tile/ Fullscreen in Angular

In this tutorial, we will be discussing how to implement file upload in an Angular application using Firebase as the backend. We will also be covering how to create a gallery style view for the uploaded files, with the ability to toggle between list and tile view, and add a fullscreen view. Additionally, we will be implementing a feature to delete the uploaded files. This tutorial will provide a detailed guide on how to implement these features, with example code and explanations of how each component works. By the end of this tutorial, you will have a good understanding of how to implement file upload and gallery functionality in an Angular application using Firebase.

To create a component to view the uploaded files in a gallery style view with list and tile view toggle button and fullscreen view, you can follow these steps:

Step 1: Create a new component

To create a new component, open the command prompt and navigate to the root of your Angular application. Run the following command:

ng g component file-gallery

This will create a new file gallery component in the “src/app” directory.

Step 2: Fetch the uploaded files from Firebase

In the “src/app/file-gallery/file-gallery.component.ts” file, you can import the AngularFirestore service and create a method to fetch the uploaded files from Firebase.

import { AngularFirestore } from 'angularfire2/firestore';

export class FileGalleryComponent {
  files: any[];

  constructor(private firestore: AngularFirestore) { }

  ngOnInit() {
    this.firestore.collection('files').valueChanges().subscribe(files => {
      this.files = files;
    });
  }
}

You can also create a variable to store the files and subscribe to the valueChanges() method of the Firebase collection to get the list of files.

Step 3: Display the files in a gallery view

In the “src/app/file-gallery/file-gallery.component.html” file, you can use *ngFor directive to iterate through the files array and display them in a gallery view.

<div *ngFor="let file of files">
  <img [src]="file.url">
  <p>{{file.name}}</p>
</div>

You can also add a class to the div element and use CSS to style the gallery view as either list or tile view.

<div *ngFor="let file of files" class="tile-view">
  <img [src]="file.url">
  <p>{{file.name}}</p>
</div>

.tile-view {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
}

Step 4: Add toggle button to switch between list and tile view

To add a toggle button to switch between list and tile view, you can add a button element in the template and bind it to a method in the component.ts file that will toggle a variable.

<button (click)="toggleView()">Toggle View</button>

export class FileGalleryComponent {
  files: any[];
  isTileView = true;

  constructor(private firestore: AngularFirestore) { }

  ngOnInit() {
    this.firestore.collection('files').valueChanges().subscribe(files => {
      this.files = files;
    });
  }

  toggleView() {
    this.isTileView = !this.isTileView;
  }
}

You can also use this variable to conditionally add or remove the tile-view class on the div element.

<div *ngFor="let file of files" [class.tile-view]="isTileView">

Step 5: Add fullscreen view

To add fullscreen view, you can create a new method in the component.ts file that will take the selected file url and set it as a variable.

openFullscreen(url: string) {
  this.fullscreenUrl = url;
}

In the template, you can add a button on each image to open fullscreen on click

<div *ngFor="let file of files" [class.tile-view]="isTileView">
  <img [src]="file.url" (click)="openFullscreen(file.url)">
  <p>{{file.name}}</p>
</div>

and you can use this variable to display the image in fullscreen.

<div *ngIf="fullscreenUrl">
  <img [src]="fullscreenUrl">
</div>

Step 6: Add a close button for fullscreen view

To add a close button for the fullscreen view, you can create a new method in the component.ts file that will set the fullscreenUrl variable to null.

closeFullscreen() {
  this.fullscreenUrl = null;
}

In the template, you can add a button within the fullscreen view div to call this method on click.

<div *ngIf="fullscreenUrl">
  <img [src]="fullscreenUrl">
  <button (click)="closeFullscreen()">Close</button>
</div>

Step 7: Add functionality to delete the uploaded file

You can also add functionality to delete the uploaded files by creating a method in the component.ts file that will take the selected file and call the delete method on the Firebase storage reference.

deleteFile(file: any) {
  const storageRef = this.firestorage.storage.ref(file.path);
  storageRef.delete().then(() => {
    console.log('File deleted');
    // remove the file from the files array
  });
}

In the template, you can add a delete button on each file that calls this method on click and pass the selected file as a parameter.

<div *ngFor="let file of files" [class.tile-view]="isTileView">
  <img [src]="file.url" (click)="openFullscreen(file.url)">

  <p>{{file.name}}</p>
  <button (click)="deleteFile(file)">Delete</button>
</div>

After the file is deleted, you will also need to remove it from the files array, you can do this by using the filter method to create a new array without the deleted file.

this.files = this.files.filter(f => f !== file);

Conclusion:

In this tutorial, we have discussed how to create a gallery style view for uploaded files in an Angular application using Firebase as the backend. We have covered how to fetch the files from Firebase, display them in a gallery view, toggle between list and tile view, add fullscreen view and delete functionality. This feature can be useful for many application and improve the user experience with more functionality. It is important to handle the security and access of the files as well.

Category: Angular

Firebase – View Images in List/ Tile/ Fullscreen in Angular