Function DocumentReference.set() called with invalid data

Question

I'm trying to upload an image and a title from an angular website to firestore.

This is my template.

<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
    <div class="form-group">
        <input type="text" name="title" id="title" #title="ngModel" [(ngModel)]="service.timetable.title">
    </div>
    <div class="form-group">
        <input hidden type="text" name="id" id="id" #id="ngModel" [(ngModel)]="service.timetable.id">
    </div>
    <div class="form-group">
        <input hidden type="text" name="imgurl" id="imgurl" #imgurl="ngModel" [(ngModel)]="service.timetable.imgurl">
    </div>
    <div class="form-group">
        <input type="file" name="timetable" id="timetable" (change)="uploadImage($event)">
    </div>
    <div>

    </div>
    <button type="submit">Submit</button>
</form>

This is my typescript file

import { TimetableService } from './../../shared/timetable.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { NgForm } from '@angular/forms';
import { AngularFireStorage } from '@angular/fire/storage';
import { Component, OnInit } from '@angular/core';

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

  selectedFile =null;

  constructor(private storage: AngularFireStorage, private firebase: AngularFirestore, private service: TimetableService) { }

  ngOnInit() {
    this.resetForm();

  }

  resetForm(form?: NgForm){
    if(form!=null)
    form.resetForm();
    this.service.timetable ={
      id: null,
      title:"",
      imgurl:""
    };
  }

  async onSubmit(form: NgForm){

    let dataa = Object.assign({},form.value);// id, imgurl, title
    delete dataa.id;
    let filepath = 'timetable'+ dataa.title;
    const task =this.storage.upload(filepath, this.selectedFile );
    await task;
    const imageurl =(await task).downloadURL;

    dataa.imgurl = imageurl;

    this.firebase.collection('timetabledata').add(dataa);

  }

  uploadImage(event){
    this.selectedFile = event.target.files[0];
  }

}

and i get this error when I hit the submit button

ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field imgurl)
FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field imgurl)
    at new FirestoreError (index.cjs.js:350)
    at ParseContext.push../node_modules/@firebase/firestore/dist/index.cjs.js.ParseContext.createError (index.cjs.js:20355)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseScalarValue (index.cjs.js:20702)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseData (index.cjs.js:20568)
    at index.cjs.js:20584
    at forEach (index.cjs.js:454)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseObject (index.cjs.js:20583)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseData (index.cjs.js:20542)
    at UserDataConverter.push../node_modules/@firebase/firestore/dist/index.cjs.js.UserDataConverter.parseSetData (index.cjs.js:20407)
    at DocumentReference.push../node_modules/@firebase/firestore/dist/index.cjs.js.DocumentReference.set (index.cjs.js:21384)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:707
    at fulfilled (tslib.es6.js:70)
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39698)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)

I want to upload the image to firestore storage, get the downloadUrl and then to save title and downloadUrl in firestore. And I need to get these data into the form when I need to edit the record. What should I do to fix this?

I made an edit to the question. Previously the error has occurred in "id" field and I have fixed it. It was a silly mistake. but now it's happening in "imgurl" field.

Answer 1

The imageUrl is undefined thus you got that error, after the upload method, you need to do the following :

 onSubmit(form: NgForm){
    let dataa = Object.assign({},form.value);// id, imgurl, title
    delete dataa.id;
    let filepath = 'timetable'+ dataa.title;
    const fileRef = this.storage.ref(filepath);
    const task =this.storage.upload(filepath, this.selectedFile);
    task.snapshotChanges().pipe(
      finalize(() => {
        fileRef.getDownloadURL().subscribe(url => {
          console.log(url); // <-- do what ever you want with the url..
        dataa.imgurl = url;
        this.firebase.collection('timetabledata').add(dataa);
        });
      })
    ).subscribe(); 
  }

The method getDownloadURL() doesn't rely on the task anymore, hence, in order to get the url we should use the finalize method from RxJS on top of the storage ref.

Check the docs:

https://github.com/angular/angularfire/blob/master/docs/storage/storage.md