Angular – FileReader() dont get any path

I try to pass an Image in an dialog where the User can crop the image via cropperjs and can upload it afterwards but sometimes the FileReader() didnt get any path.

It is strange, sometimes it works but most of the time my variable is empty… i think did is random because i dont find a pattern to get the URL.

This component.ts

  constructor(private route: ActivatedRoute, public dialog: MatDialog,) { }
  @Input() user: any
  @Input() userProfile: any
  @Input() userPosts: any
  imageSource: any = null;

  ngOnInit(): void {
    this.route.data.subscribe((data: {user: any}) => { this.user = data.user;});
    this.route.data.subscribe((data: {userProfile: any}) => { this.userProfile = data.userProfile;});
    this.route.data.subscribe((data: {userPosts: any}) => { this.userPosts = data.userPosts;});
    console.log(this.userProfile)
  }

  openDialog(src:string): void {
    const dialogRef = this.dialog.open(UserImgDialogComponent, {
      width: '500px',
      minHeight: '350px',
      data: src,
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes')
      }
    })
  }

  uploadFile($event) {

    if ($event.target.files && $event.target.files[0]) {
      const file = $event.target.files[0];

      const reader = new FileReader();
      reader.readAsDataURL(file)
      reader.onload = e => this.imageSource = reader.result;
      this.openDialog(this.imageSource);
    }
}

}

This is my html

 <div class="UserImageDiv">
        <img [src]="userProfile.profileImagePath" class="UserImage">
        <button mat-icon-button matTooltip="Profilbild ändern" class='changeUserImg' (click)="uploader.click()">
          <mat-icon>add_a_photo</mat-icon>
        </button>
        <input hidden type="file" #uploader (change)="uploadFile($event)" />
      </div>

Can someone please help me?
Is there another way to get the Path of an Image upload?

Source: Angular Questions