Receive "Tried to encode an unsaved file" when trying to add user avatar image

Moralis General
#1

I am using Moralis in my Angular 11 app and I’m trying to add the functionality for user to add their user image. but when I add an image, I receive this error in my console:

core.js ERROR Error: Uncaught (in promise): Error: Tried to encode an unsaved file.
Error: Tried to encode an unsaved file.

This is my html:

      <input
        id="input__user--avatar"
        #fileInput
        type="file"
        name="pic"
        formControlName="avatar"
      />

and this is my typescript:

    const uploadedFile = this.el.nativeElement;
    if (uploadedFile.files.length > 0) {
      const file = uploadedFile.files[0];
      const name = 'avatar.jpg';
      const avatar = new Moralis.File(name, file);

      this.moralisService.changeAvatar(avatar);
    }

This is changeAvatar method in Moralis service:

  changeAvatar(avatar: any): void {
    this.currentUser.set('avatar', avatar);
    this.currentUser.save();
  }
#2

you may need to save the file after the first line

1 Like
#3

Okay. how do i do that?

#4

you can use something like avatar.save()

1 Like
#6

Thank you so much it’s fixed now.