bezkoder/angular-13-firebase-storage

Firebase Storage with Angular 13 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 13 File Upload to Firebase Storage example

I will show you how to make Angular 13 Firebase Storage: File Upload/Display/Delete Application using @angular/fire & AngularFireStorage. Files' info will be stored in Firebase Realtime Database.

For more detail, please visit:

Angular 13 Firebase Storage: File Upload/Display/Delete example

More Practice:

Angular Firebase CRUD with Realtime DataBase | AngularFireDatabase

Angular Firestore CRUD example with AngularFireStore

Angular CRUD Application example with Web API

Angular Form Validation example (Reactive Forms)

Fullstack with Node Express:

Angular + Node Express + MySQL example

Angular + Node + Express + PostgreSQL example

Angular + Node Express + MongoDB example

Fullstack with Spring Boot:

Angular + Spring Boot + H2 Embedded Database example

Angular + Spring Boot + MySQL example

Angular + Spring Boot + PostgreSQL example

Angular + Spring Boot + MongoDB example

Fullstack with Django:

Angular + Django example

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.

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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

angular-13-firebase-storage's Issues

Get Files Issue

Hello,

I've been attempting to follow the guide you posted here for my angular app:
https://www.bezkoder.com/angular-13-firebase-storage/#Component_for_File_Details

I was wondering if you had any issues with the file-list segment of the program. I'm getting the following error:
Unhandled Promise rejection: permission_denied at /Images: Client doesn't have permission to access the desired data. ; Zone: ; Task: null ; Value: Error: permission_denied at /Images: Client doesn't have permission to access the desired data.

The weird thing is that I can upload files with no issue. But I cannot pull them back down.

I had changed my base path to /Image from /upload like in your example, but otherwise my code is the same. I used firebase authstate to confirm that I'm passing a user and I've tried to just use the completely open read/write rules on your site, but I continue to get that error.

I was wondering if you had seen anything similar.

file-upload.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { AngularFireStorage } from '@angular/fire/storage';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { FileUpload } from '../models/file-upload.model';

@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  private basePath = '/Images';
  constructor(private db: AngularFireDatabase, private storage: AngularFireStorage) { }
  pushFileToStorage(fileUpload: FileUpload): Observable<number | undefined> {
    const filePath = `${this.basePath}/${fileUpload.file.name}`;
    const storageRef = this.storage.ref(filePath);
    const uploadTask = this.storage.upload(filePath, fileUpload.file);
    uploadTask.snapshotChanges().pipe(
      finalize(() => {
        storageRef.getDownloadURL().subscribe(downloadURL => {
          fileUpload.url = downloadURL;
          fileUpload.name = fileUpload.file.name;
          this.saveFileData(fileUpload);
        });
      })
    ).subscribe();
    return uploadTask.percentageChanges();
  }
  private saveFileData(fileUpload: FileUpload): void {
    this.db.list(this.basePath).push(fileUpload);
  }

  getFiles(numberItems: number): AngularFireList<FileUpload> {
    console.log('getFiles run')
    return this.db.list(this.basePath, ref =>
    ref.limitToLast(numberItems));
  }
  deleteFile(fileUpload: FileUpload): void {
    this.deleteFileDatabase(fileUpload.key)
      .then(() => {
        this.deleteFileStorage(fileUpload.name);
      })
      .catch(error => console.log(error));
  }
  private deleteFileDatabase(key: string): Promise<void> {
    return this.db.list(this.basePath).remove(key);
  }
  private deleteFileStorage(name: string): void {
    const storageRef = this.storage.ref(this.basePath);
    storageRef.child(name).delete();
  }
}

upload-list.components.ts

import { Component, OnInit } from '@angular/core';
import { FileUploadService } from 'src/app/services/file-upload.service';
import { map } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-upload-list',
  templateUrl: './upload-list.component.html',
  styleUrls: ['./upload-list.component.scss']
})
export class UploadListComponent implements OnInit {
  fileUploads?: any[];
  constructor(private uploadService: FileUploadService,
              private angularFireAuth: AngularFireAuth) { }
  ngOnInit(): void {
    this.angularFireAuth.authState.subscribe(res => {console.log("authstate: ", res.uid)})
    this.uploadService.getFiles(6).snapshotChanges().pipe(
      map(changes => 
        // store the key
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
    )
    ).subscribe(fileUploads => {
      console.log("file uploads:", this.fileUploads)
      this.fileUploads = fileUploads;
    });
  }
}