Angular 5 ошибка заголовка файла загрузки firebase

У меня есть служба загрузки, которая загружает файлы в хранилища, получает имя файла и URL-адрес, а затем записывает его в db и firestore:

project:AngularFirestoreCollection<Project[]>
pushUpload(upload: Project) {
    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot: firebase.storage.UploadTaskSnapshot) =>  {
        // upload in progress
        const snap = snapshot;
        upload.progress = (snap.bytesTransferred / snap.totalBytes) * 100

      },
      (error) => {
        // upload failed
        console.info(error);
      },
      () => {
        // upload success
        if (uploadTask.snapshot.downloadURL) {
          upload.url = uploadTask.snapshot.downloadURL;
          upload.name = upload.file.name;
          this.fire.collection(`users/${this.auth.userId}/projects`).add( { photoURL: upload.url, file: upload.file.name, title: upload.title })
          this.saveFileData(upload);
          return;
        } else {
          console.error('No download URL!');
        }


      },

    );
  }

Project.ts:

export class Project {
  $key: string;
  file: File;
  name: string;
  title:string;
  url: string;
  progress: number;
  createdAt: Date = new Date();

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

Как видите, у меня есть название в моем project.ts, и я пытаюсь написать его так:

В сервисе :

 this.fire.collection(`users/${this.auth.userId}/projects`).add( { photoURL: upload.url, file: upload.file.name, title: upload.title }) 

В компоненте:

export class AddProjectComponent implements OnInit {
  selectedFiles: FileList | null;
  currentUpload: Project;
  project = {} as Project;
  constructor(public navSrv: NavService,) { }

  detectFiles($event: Event) {
    this.selectedFiles = ($event.target as HTMLInputElement).files;
  }
  uploadSingle() {
    const file = this.selectedFiles;
    if (file && file.length === 1) {
      this.currentUpload = new Project(file.item(0));
      this.navSrv.pushUpload(this.currentUpload);
    } else {
      console.error('No file found!');
    }
  }

  uploadMulti() {
    const files = this.selectedFiles;
    if (!files || files.length === 0) {
      console.error('No Multi Files found!');
      return;
    }

    Array.from(files).forEach((file) => {
      this.currentUpload = new Project(file);
      this.navSrv.pushUpload(this.currentUpload);
    });
  }
  ngOnInit() {
  }

}

В html:

<input type = "text" ([ngModel]) = "project.title">

Ошибка :

core.js:1350 ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field title) FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field title)

Мой вопрос: почему я могу написать имя, URL, но не могу написать заголовок?

title:string; попадает в пробел между : и string
mxr7350 03.04.2018 11:45

Та же ошибка, которую видели раньше и исправили.

Angulandy2 03.04.2018 11:46

Вы проверяли значение op upload.title, прежде чем пытаться записать его в firestore? Ошибка, которую вы получаете, довольно ясна: заголовок не определен.

André Kool 03.04.2018 11:47

Как я могу проверить заголовок, если это строка?

Angulandy2 03.04.2018 11:47

console.info ("check:", this.project.title) ---- Console.log: check: undefined (но он должен быть неопределенным, если перед вводом не было значения, нет?

Angulandy2 03.04.2018 11:49
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
5
311
0

Другие вопросы по теме