Unable to route to dashboard after firestore doc upload

Question

I am trying to upload an audio file to firebase storage as well as upload document data about the audio file in firestore database. Sequence of operation is record audio--> put audio file in firebase storage-->submit form data to firestore database and router.navigate to [/dashboard]. Everything is working however unable to achieve last step ie not able to navigate to [/dashboard]. Below is the code

.ts file

submitData(form:NgForm) {
    const autoId = this.afs.createId();
    const audioRef: AngularFirestoreDocument<any> = this.afs.doc(`audiofiles/${autoId}`);
    var user = firebase.auth().currentUser;
    var uid = user.uid;

    var file = this.blob;
    var name = uid + "_" + autoId + ".wav";
    var storageRef = firebase.storage().ref();
    var audioRef = storageRef.child('raw-audio');
    var audioImagesRef = audioRef.child(name);

    audioImagesRef.put(file).then(function (snapshot) {

      var storyTime = firebase.firestore.Timestamp.fromDate(new Date());
      snapshot.ref.getDownloadURL().then(function (rawFileURL) {

        let storyData: Story = {
          rawfilepath: rawFileURL,
          username: form.value.username,
          audiotitle: form.value.audiotitle,
          userid: uid,
          time: audioTime,
        }

          audioRef.set(audioData)
          .then(
            res => {
              this.router.navigate(['/dashboard']);
            },
            err => {
              console.log(err);
            }
          )
        
      });
     });
  }

I get following error

Error: Uncaught (in promise): TypeError: Cannot read property 'router' of undefined

I'd appreciate if anyone can help with navigating to the [/dashboard]. Thanks for your time in advance.

Answer 1

You probably want to use an arrow function instead of the function keyword, in order to avoid redefining this in its scope:

audioImagesRef.put(file).then(snapshot => {

snapshot.ref.getDownloadURL().then(rawFileURL => {