ReactiveForms with capacitor camera plugin not working right

Hi there I hope everyone is safe, I been having this problem for like a few days now. Im trying to update my user info and works except for the photo but my form doesnt wanna read the file. i have use another pluging with it camerasource and cameraresulttype to be able to use the camera in the browser as well, the thing is that it works just fine in Desktop but when it comes to a real device android it does not work I try to do some console.log(this.form.get(‘photo’).value and in browser console, works fine i can see the img or photo file but in android it gives me null.
Please help thank you
this are the file:
ngOnInit() {

this.route.paramMap.subscribe(paramMap => {

  if (!paramMap.has('userinfoId')) {

    this.navCtrl.navigateBack('/tabs/tab/profile');

    return;

  }

  this.userinfoId = paramMap.get('userinfoId');

  this.isLoading = true;

  this.userinfoSub = this.userinfoService

    .getUserinfo(paramMap.get('userinfoId'))

    .subscribe(

      userInfo => {

        this.userinfo = userInfo;

        this.form = new FormGroup({

          name: new FormControl(this.userinfo.name, {

            updateOn: 'blur',

            validators: [Validators.required, Validators.maxLength(18)]

          }),

          photo: new FormControl(null)

            // {

            // updateOn: 'blur',

            // validators: [Validators.required]

          // })

        });

        this.isLoading = false;

      },

      error => {

        this.alertCtrl

          .create({

            header: 'An error occurred!',

            message: 'Info could not be fetched. Please try again later.',

            buttons: [

              {

                text: 'Okay',

                handler: () => {

                  this.router.navigate(['/tabs/tab/profile']);

                }

              }

            ]

          })

          .then(alertEl => {

            alertEl.present();

          });

      }

    );

});

}

onUpdateUserInfo() {

if (!this.form.valid) {

  return;

}

this.loadingCtrl

  .create({

    message: 'Updating...'

  })

  .then(loadingEl => {

    loadingEl.present();

    console.log(this.form.value.photo);

    console.log();

    console.log(this.form.get('photo').value);

    this.userinfoService

    .uploadImage(this.form.get('photo').value)

    .pipe(

      switchMap( uploadRes => {

        return this.userinfoService

          .updateUserInfo(

            this.userinfo.id,

            this.form.value.name,

            uploadRes.imageUrl

          );

      })

    )

      .subscribe(() => {

        loadingEl.dismiss();

        this.form.reset();

        this.router.navigate(['/tabs/tab/profile']);

      });

  });

}