Мне не удается сохранить файлы в моем хранилище Firebase

Question

В настоящее время я пытаюсь освоить firebase и его систему хранения, но, к сожалению, мне не удалось зарегистрировать какой-либо файл.Насколько я применяю себя, чтобы заставить это работать, единственный результат, который я мог когда-либо получить, является странным "C: // fakepath- [имя файла]", вставляющим себя в мою базу данных в реальном времени.Сам по себе файл не загружается даже после прохождения правил безопасности хранилища в публичном режиме. Также, даже если я не думаю, что это действительно имеет значение, я работаю с последней версией angular.

Я попытаюсь обобщить логику, чтобы вы могли понять, что и как происходит. Одним словом, у меня есть служба, содержащая некоторые функции, предназначенные для обработки системы галереи изображений.В файл с именем gallery.service.ts я поместил функцию сохранения, которая выглядит так:

saveImage() {

  var images = this.images // There is a "images" class variable that contains all the images which has to be registered

  images.forEach((img,index)=>{

    for(let key in img){
      firebase.database().ref('/images/'+ index + '/' + key).set(img[key])
    }

    let storageRef = firebase.storage().ref('/images/' + index + '/image_file')
    storageRef.put(img.imageFile)

  })

Я использую этот сервис, включив его в компонент from, роль которого заключается в сборке некоторыхполя, необходимые для создания объекта Image.

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormBuilder } from '@angular/forms'
import { Image } from '../../model/image.model'
import { GalleryService } from '../../services/gallery/gallery.service'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-form-add-image',
  templateUrl: './form-add-image.component.html',
  styleUrls: ['./form-add-image.component.css']
})

export class FormAddImageComponent implements OnInit {

  imageForm: FormGroup;
  images: Image[] = [];
  imagesSubscription : Subscription

  constructor(private formBuilder: FormBuilder,
              private galleryService : GalleryService
  ) { }

  ngOnInit() {
    this.initForm();

    this.galleryService.getImages()

    this.imagesSubscription = this.galleryService.imagesSubject.subscribe(
      (images: Image[]) => {
        this.images = images
      }
    );

  }

  initForm() {
    this.imageForm = this.formBuilder.group({
      imageName: '',
      imageDescription: '',
      imageAlt: '',
      imageFile: ''
    });
  }

  onSubmitForm() {
    const formValue = this.imageForm.value;

    var idNewImg = this.images.length
    var newImage = new Image(
      idNewImg,
      formValue['imageName'],
      formValue['imageDescription'],
      formValue['imageAlt'],
      formValue['imageFile']

    )
    this.images.push(newImage)
    this.galleryService.saveImage();

  }
}

Вот шаблон формы, на всякий случай:

<form [formGroup]='imageForm' (ngSubmit)='onSubmitForm()'>

  <label for="imageName"> Image Name </label>
  <input id='imageName' name="imageName" formControlName="imageName"/>
  <label for="imageDescription"> Image Description </label>
  <input  id='imageDescription' name="imageDescription" formControlName="imageDescription"/>
  <label for="imageAlt"> Image Alt </label>
  <input id='imageAlt' name="imageAlt" formControlName="imageAlt"/>
  <label for="imageFile"> Image File </label>
  <input type = 'file' id='imageFile' name="imageFile" formControlName="imageFile"/>
  <label for='submit'> Envoyer </label>
  <input type='submit' id='submit' />

</form>

Шаблон моего изображения выглядит следующим образом:

export class Image{
  constructor(
    public id : number,
    public imageName: string,
    public imageDescription: string,
    public imageAlt:  string,
    public imageFile: any
  ){

  }
}

Кто-нибудь знает, почемузагрузка не происходит правильно?