Cannot Firebase downloaded Url?

Question

I have a Service TypeScript File with following Code

export class FirebaseService {
  constructor(private afs: AngularFirestore, private storage: AngularFireStorage) {}

  uploadFile(file: any) {
    const filePath = 'path/to/save/file';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    return task.snapshotChanges().pipe(
      finalize(() => {
        return fileRef.getDownloadURL()
      })
    ).toPromise();
  }

  createDocument(collection: string, name: string, file: any) {
    this.uploadFile(file).then(downloadURL => {
      if (downloadURL) {
        const data = {
          title: name,
          downloadURL: downloadURL
        };
        this.afs.collection(collection).add(data);
      } else {
        console.log("downloadURL is not defined.");
      }
    });
  }
}

In my Component I have following code

export class CreatePage implements OnInit {
  name = ""

  file: any;

  onFileChanged(event: any) {
    this.file = event.target.files[0];
  }
  onSubmit() {
    console.log("this.selectedOption = ",JSON.stringify(this.selectedOption))
console.log("this.name = ",JSON.stringify(this.name,))
console.log("this.file = ",JSON.stringify(this.file))
console.log("TEST", this.file)

    this.firebaseService.createDocument(this.selectedOption, this.name, this.file)

    this.name = "", this.selectedOption = ""
  }
}

The output of the 4 values from console log is:

Selected option: freunde
this.selectedOption =  "freunde"
this.name =  "test"
this.file =  {}
TEST File {name: 'berge.jpg', lastModified: 1673618629595, lastModifiedDate: Fri Jan 13 2023 15:03:49 GMT+0100 (Mitteleuropäische Normalzeit), webkitRelativePath: '', size: 990092, …}
Selected option: 

The HTML looks like this:

<ion-item>   <input type="file"  (change)="onFileChanged($event)"> </ion-item>

How can I fix this problem? The error message says following:

core.mjs:9095 ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field downloadURL.metadata.cacheControl in document freunde/lcAwFcHvQSo5iV6ExQPi)

It will upload the image to the storage, but not the downloaded url in the firebase firestore. Can someone help me please?

The Object look like this after printing the data object

data =  {
  "title": "test",
  "downloadURL": {
    "source": {
      "source": {
        "source": {}
      }
    }
  }
}

Answer 1

Debugging step 1.

Make your code show exactly what you are sending to Firebase. Change the console.log to three console.logs

console.log("this.selectedOption = ",JSON.stringify(this.selectedOption,null,2))
console.log("this.name = ",JSON.stringify(this.name,null,2))
console.log("this.file = ",JSON.stringify(this.file,null,2))

Also add this before your call to add :

Before this:

this.afs.collection(collection).add(data);

Add this:

console.log("data = ", JSON.stringify(data, null, 2))

Show in your question the exact output from the above

This will maximise our chances of finding the problem.

Why JSON.stringify ?

I can see by your comment that you are annoyed by my suggestion to use JSON.stringify . The reason to use it is to force the console.log output to be the instantaneous value of the variable at that time, rather than an automatically-updating value that might display a different value on the console than the value being experienced by your program at the time of the error.

You can now see the utility of the JSON.stringify!

Your simple console.log(this.file) is reporting the full value with properties filled in.

But the JSON stringify, is showing you that, at the time that the line was run, this.file was simply {}, ie an empty object. Firebase was being sent {}, not the filled-in object.

You can also see the value of the ,null,2

This would have prevented the truncation of a line at:

size: 990092, ...

Volunteers on Stack Overflow would therefore have been able to tell if there was something later on in the object that was undefined or in some other way conflicting with Firebase.

These debugging tips are there to help us help you. If you don't follow the advice we give, it lessens people's enthusiasm to help.

Answer 2

I have now fixed my problem with following code.

I changed the uploadFile Function to following:

uploadFile(file: any) {
    const filePath = 'images/file';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    return task.snapshotChanges().toPromise().then(() => {
        return fileRef.getDownloadURL().toPromise()
    });
  }

Instead of returning a object I return now a Promise. This way we are waiting for the promise to resolve and getting the downloadURL. It should resolve the issue and allow the createDocument method to access the download URL without any error.