The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

Question

The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

I'm currently working on an Angular application integrated with Firebase for the purpose of uploading images to the database and retrieving them as well.

upload-file.service.ts

import {Injectable} from '@angular/core';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import * as firebase from 'firebase';

import {FileUpload} from '../uploadingpage/fileupload';

@Injectable()
export class UploadFileService {

  constructor(private db: AngularFireDatabase) {}
  getFileUploads (): AngularFireList<FileUpload[]>{
        return this.db.list('/uploads');
    }

  private basePath = '/uploads';
  fileUploads: AngularFireList<FileUpload[]>;

  pushFileToStorage(fileUpload: FileUpload, progress: {percentage: number}) {
    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // in progress
        const snap = snapshot as firebase.storage.UploadTaskSnapshot
        progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
      },
      (error) => {
        // fail
        console.log(error)
      },
      () => {
        // success
        fileUpload.url = uploadTask.snapshot.downloadURL
        fileUpload.name = fileUpload.file.name
        this.saveFileData(fileUpload)
      }
    );
  }

  private saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }
}

uploadingpage.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase';
import { FirebaseAuthService } from '../auth/firebase-auth.service';

import { ItemService } from '../services/item.service';
import { UploadFileService } from '../services/upload-file.service';
import { FileUpload } from './fileupload';

@Component({
  selector: 'app-uploadingpage',
  templateUrl: './uploadingpage.component.html',
  styleUrls: ['./uploadingpage.component.css']
})
export class ProfileComponent implements OnInit {

  //for image
  selectedFiles: FileList;
  currentFileUpload: FileUpload;
  progress: {percentage: number} = {percentage: 0};


  constructor(
    private afDb: AngularFireDatabase,
    private _auth: FirebaseAuthService,
    private itemService: ItemService,
    private uploadService: UploadFileService 
  ) { }

  ngOnInit() {
  }

  //for image
  selectFile(event) {
    this.selectedFiles = event.target.files;
  }
 //for image
  upload() {
    const file = this.selectedFiles.item(0)
    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }

  signOut(){
    this._auth.signOut();
    window.location.href = "";    
  }
}

displaypage.component.ts

import { Component, OnInit } from '@angular/core';
      //additional imports
      import { ItemService } from '../services/item.service';
      import {FileUpload} from '../uploadingpage/fileupload';
      import {UploadFileService} from '../services/upload-file.service';
      import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; 
      import * as firebase from 'firebase';

      @Component({
        selector: 'app-admin',
        templateUrl: './displaypage.component.html',
        styleUrls: ['./displaypage.component.css']
      })
      export class DisplaypageComponent implements OnInit {

        fileUploads: AngularFireList<FileUpload[]>;

        constructor(private itemService: ItemService, private uploadService: UploadFileService) { }

        ngOnInit() {
          this.itemService.getItems().subscribe(items => {
            this.items = items;
          });
         this.uploadService.getFileUploads().valueChanges().subscribe(result=>{
             this.fileUploads = result;
         });
        }

      }

Although I have successfully implemented image upload and retrieval functionalities using Firebase, I encountered an error displayed in my terminal stating:

Type 'FileUpload[][]' is not assignable to type 'AngularFireList<FileUpload[]>

Property 'query' is missing in type 'FileUpload[][]'.

If anyone could provide insights into why this error is occurring, it would be highly appreciated. Thank you for your assistance.

angular typescript firebase file-upload firebase-realtime-database

Answer 1

Answer №1

Avoid using the AngularFireList type in this scenario,

Instead, create a class like so:

export class Upload {

  $key: string;
  name: string;
  url: string;
  file: File;
  progress:number;
  timestamp: Date = new Date();

  constructor(file: File) {
    this.file = file;
  }
}

In your service implementation, do the following:

uploads: Observable<Upload[]>;

getUploads() {
  this.uploads = this.db.list(this.basePath).snapshotChanges().map((actions) => {
    return actions.map((a) => {
      const data = a.payload.val();
      const $key = a.payload.key;
      return { $key, ...data };
    });
  });
  return this.uploads;
}

And within your component code:

uploads: Observable<Upload[]>;
ngOnInit() {
  this.uploads = this.uploadService.getUploads();   
}

To display the results on your page, modify the HTML as follows:

<div *ngIf="uploads | async; let uploads; else loading"> 
<div *ngFor="let upload of uploads"> 
<img [src]="file.url" id="image" /> 
</div> 
</div>

Answer 2

Avoid using the AngularFireList type in this scenario,

Instead, create a class like so:

export class Upload {

  $key: string;
  name: string;
  url: string;
  file: File;
  progress:number;
  timestamp: Date = new Date();

  constructor(file: File) {
    this.file = file;
  }
}

In your service implementation, do the following:

uploads: Observable<Upload[]>;

getUploads() {
  this.uploads = this.db.list(this.basePath).snapshotChanges().map((actions) => {
    return actions.map((a) => {
      const data = a.payload.val();
      const $key = a.payload.key;
      return { $key, ...data };
    });
  });
  return this.uploads;
}

And within your component code:

uploads: Observable<Upload[]>;
ngOnInit() {
  this.uploads = this.uploadService.getUploads();   
}

To display the results on your page, modify the HTML as follows:

<div *ngIf="uploads | async; let uploads; else loading"> 
<div *ngFor="let upload of uploads"> 
<img [src]="file.url" id="image" /> 
</div> 
</div>

The type 'FileUpload[][]' cannot be assigned to the type 'AngularFireList<FileUpload[]>'

upload-file.service.ts

uploadingpage.component.ts

displaypage.component.ts

Answer №1

Similar questions

Step-by-step guide to integrating Google AdSense ads.txt file into an Angular project

React Scheduler by Bryntum

Capacitor and Angular: Trouble with appStateChange listener functionality

Attempting to create a login feature using phpMyAdmin in Ionic framework

Tips for stopping TypeScript code blocks from being compiled by the Angular AOT Webpack plugin

Discovering the best way to utilize pagination for searching all data within Angular 8

The console is displaying an undefined error for _co.photo, but the code is functioning properly without any issues

Transferring information between components, specifically when one of them is a routerOutlet within an Angular application

The correct way to incorporate a global property into a component template (using Vue 3, Vite, TypeScript, and the Composition API)

Using ngModel in multiple mat-select elements in Angular 2/4

Position filter forms on the left side to align with bootstrap cards

Exporting declarations and different export types within a TypeScript ambient module

A programming element that is capable of accessing a data member, but mandates the use of a setter method for modifications

implement some level of control within the ngFor directive in Angular

Trying to automatically select a checkbox upon page load in Angular 6

Steps for running an Angular application in IntelliJ:1. Open IntelliJ IDEA

An error occurred due to an unexpected token found in the JsonForms custom-renderer props

Passing parameters to an Angular 2 component

Encountering a d3.js runtime issue following the transition to Angular 8

Tips for ensuring proper dependency regulations in javascript/typescript/webpack