TypeError: Cannot set properties of undefined

Question

I'm trying to upload an image to the firebase storage and after that add the image url to the firestore database.

  userId: string;
  fullname: string;
  phone: string;
  userPhoto: string;


  constructor(
    private auth: AuthService,
    public afauth: AngularFireAuth,
    private afs: AngularFirestore,
    private loadingCtrl: LoadingController,
    private toastr: ToastController,
    private angularFireStorage: AngularFireStorage
  ) { }

  ngOnInit() {
    this.auth.user$.subscribe(user => {
      this.userId = user.userId;
      this.fullname = user.userName;
      this.phone = user.userPhone;
      this.userPhoto = user.userPhoto;
    })
    }


    imageName() {
      const newTime = Math.floor(Date.now() / 1000);
      return Math.floor(Math.random() * 20) + newTime;
    }
  
    async storeImage(imageData: any, location: string) {
      try {
        const imageName = this.imageName();
        return new Promise((resolve, reject) => {
          const pictureRef = this.angularFireStorage.ref(location + imageName);
          pictureRef
            .put(imageData)
            .then(function () {
              pictureRef.getDownloadURL().subscribe((url: any) => {
                resolve(url);
                console.log(url);
                this.userPhoto = url //error
              //   this.afs.collection('user').doc(this.userId).set({
              //     'userPhoto': url,
              //     'editedAt': Date.now()
              //   }, {merge: true})
              });
            })
            .catch((error) => {
              reject(error);
            });
        });
      } catch (e) {}
    }

After I try to give an value to userPhoto variable, I got this error: TypeError: Cannot set properties of undefined (setting 'userPhoto'). I wrote error in comment in the line where this is happening. Somebody can help me what am I doing wrong?

`.then(function () {` use arrow function here – Roberto Zvjerković Oct 31 '21 at 17:32 — Roberto Zvjerković, Oct 31 '21 at 17:32

score 1 · Accepted Answer · answered Oct 31 '21 at 17:43

1

In comment I got the answer from @RobertoZvjerković which is, in the line where we see this .then(function () { there it should be look like this .then(() => {.

answered Oct 31 '21 at 17:43

score 0 · Answer 2 · answered Oct 31 '21 at 17:04

The scope in your callback is no more the one of the whole component. You can use the component's scope by adding a method on the component and calling it from your callback. In the method, you can refer to this as the component itself. Here's an example:

updateUserPhoto(url: string) {
    this.userPhoto = url
}

async storeImage(imageData: any, location: string) {
      try {
        const imageName = this.imageName();
        return new Promise((resolve, reject) => {
          const pictureRef = this.angularFireStorage.ref(location + imageName);
          pictureRef
            .put(imageData)
            .then(function () {
              pictureRef.getDownloadURL().subscribe((url: any) => {
                resolve(url);
                console.log(url);
                updateUserPhoto(url)
              //   this.afs.collection('user').doc(this.userId).set({
              //     'userPhoto': url,
              //     'editedAt': Date.now()
              //   }, {merge: true})
              });
            })
            .catch((error) => {
              reject(error);
            });
        });
      } catch (e) {}
    }

If I use this as like `updateUserPhoto(url)` then I can't call the function, but If I use as `this.updateUserPhoto(url)` then I got this error `TypeError: Cannot read properties of undefined (reading 'updateUserPhoto')`. — , Oct 31 '21 at 17:30

TypeError: Cannot set properties of undefined

2 Answers2