Property 'readAsArrayBuffer' does not exist on type 'File'

Question

I’m trying to implement gallery photos in my app and get this error.

HTML:

 <ion-content >
    <ion-button (click)="openGalery()" expand="block">
    Escolha uma foto
  </ion-button>

<ion-item>
<ion-label>Uploading: {{ uploadPercent | async }}% </ion-label>
</ion-item>
<ion-item>
    <ion-label class="ion-text-wrap">URL de download: {{ downloadUrl | async }} </ion-label>
</ion-item>

<img [src]="downloadUrl | async " *ngIf="downloadUrl | async">

Code:

export class HomePage implements OnInit {
public uploadPercent : Observable<number>;
public downloadUrl: Observable<string>;

 constructor( private Camera: Camera,  
    private platform: Platform,
    private file: File,
    private afStorage: AngularFireStorage,

  async openGalery()
{
const options: CameraOptions = {
  quality : 100,
  destinationType: this.Camera.DestinationType.FILE_URI,
  sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
  correctOrientation: true
};

try {
  const fileUri: string = await this.Camera.getPicture(options); 

  let file: string;
  if(this.platform.is('ios')){
    file = fileUri.split('/').pop();
  }else {
    file = fileUri.substring(fileUri.lastIndexOf('/')+ 1 , fileUri.indexOf('?'));
  }
const path: string = fileUri.substring(0,fileUri.lastIndexOf('/'));

const buffer : ArrayBuffer = await this.file.readAsArrayBuffer(path , file);
const blob: Blob = new Blob([buffer], { type: 'image/jpeg' });

this.uploadPicture(blob); 
}catch(error){
  console.log(error);
}
 uploadPicture(blob: Blob)
  {
const ref = this.afStorage.ref('ionic.jpg');
const task = ref.put(blob);


this.uploadPercent = task.percentageChanges();

task.snapshotChanges().pipe(
  finalize(() => this.downloadUrl = ref.getDownloadURL())
).subscribe();
  }