Angular TypeError: Невозможно прочитать свойство '0' из неопределенного при использовании event.target.file [0]

Question

В настоящее время я пытаюсь получить входной файл от пользователя и сохранить его в Firebase Storage с помощью AngularFire. Поскольку он не определен, я уверен, что какой бы файл он ни просматривал, он имеет значение NULL, но мой пользовательский интерфейс ясно показывает, что я успешно ввел файл, но ошибка обнаруживается, как только я выбираю файл. Я неправильно понимаю, как ввод отправляет информацию в мой файл TypeScript?

Вот мой файл TS:

import { AngularFirestore } from '@angular/fire/firestore';
import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
import { finalize, tap, map } from 'rxjs/operators';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { SubmitPostService } from './submit-post.service';
import { Post } from '../post.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-post-creation',
  templateUrl: './post-creation.component.html',
  styleUrls: ['./post-creation.component.scss']
})
export class PostCreationComponent implements OnInit {

  private uuidv4 = require('uuid/v4');

  // Main task
  task: AngularFireUploadTask;

  // Progress Monitoring
  percentage: Observable<number>;

  // Download URL
  downloadURL: Observable<string>;

  myForm: FormGroup;
  post: Post;
  ref: AngularFireStorageReference;
  files: Observable<any>;

  constructor(
    private formBuilder: FormBuilder,
    private postService: SubmitPostService,
    private storage: AngularFireStorage,
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      title: ['', [Validators.required]],
      artists: ['', [Validators.required]],
      description: '',
      medium: ''
    });

    this.myForm.valueChanges.subscribe(console.log);
  }

  onSubmit() {
    this.post = new Post(
      this.uuidv4(),
      this.myForm.get('artists').value,
      this.myForm.get('title').value,
      new Date(),
      new Date(),
      `images/${Date.now()}_${this.myForm.get('title').value}`,
      this.myForm.get('description').value,
      this.myForm.get('medium').value
      );
    this.postService.submitPost(this.post);
  }

  upload(event: any) {
    console.log('Upload successful');
    try {
      const file = event.target.file[0];

      // The storage path
      const path = `images/${Date.now()}_${file.name}`;

      // Reference to storage bucket
      this.ref = this.storage.ref(path);

      // Main Task
      this.task = this.ref.put(file);

      // Tracks progress
      this.percentage = this.task.percentageChanges();

      this.percentage = this.task.snapshotChanges()
      .pipe(map(s => (s.bytesTransferred / s.totalBytes) * 100));

      this.downloadURL = this.ref.getDownloadURL();

    } catch (err) { console.log(err); }

    }

}

Вот мой HTML:

  <div>
    <div class="progress">
      <progress max="100" [value]="(percentage | async)"></progress>
    </div>
    <h1>Post Creation</h1>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">

      <mat-form-field>
        <input matInput placeholder="Title" formControlName="title">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Artists" formControlName="artists">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Description" formControlName="description">
      </mat-form-field>

      <br>

      <mat-form-field>
        <input matInput placeholder="Medium" formControlName="medium">
      </mat-form-field>

      <br>

      <input type="file" (change)="upload($event)" accept=".png,.jpg">

      <br>
      <br>

      <button mat-raised-button [disabled]="myForm.invalid" color="primary">Submit Post</button>
    </form>
  </div>
</body>

I ' Мы успешно создали объекты Post в Firestore, так что проблема не в том, что мои конфигурации Firebase неправильно инициализированы.

Answer 1

В вашем методе загрузки в операторе const file = event.target.file[0]; свойство file должно быть во множественном числе