Can not select and upload video ionic 4

video selection is not working … and this is my code

upload-video.ts

import { Component, OnInit } from ‘@angular/core’;
import { NavController, ToastController, AlertController, LoadingController } from ‘@ionic/angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera/ngx’;

import { File } from ‘@ionic-native/file/ngx’;
import { FileTransfer, FileUploadOptions, FileTransferObject } from ‘@ionic-native/file-transfer/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { FilePath } from ‘@ionic-native/file-path/ngx’;

import { FormGroup, FormControl, Validators } from ‘@angular/forms’;
import { Router } from ‘@angular/router’;
import { HttpClient } from ‘@angular/common/http’;
import { GlobalService } from ‘src/app/services/global.service’;
import { AuthService } from ‘…/Auth/auth.service’;
//mobad
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeRewardVideoConfig, AdMobFreeInterstitialConfig } from ‘@ionic-native/admob-free/ngx’;
import { Network } from ‘@ionic-native/network/ngx’;
import { Dialogs } from ‘@ionic-native/dialogs/ngx’;
import { ScreenOrientation } from ‘@ionic-native/screen-orientation/ngx’;

const baseUrl = “https://backend.vessel-eg.com”;
const MAX_FILE_SIZE = 10 * 1024 * 1024;
const ALLOWED_MIME_TYPE = “video/mp4”;

@Component({
selector: ‘app-upload-video’,
templateUrl: ‘./upload-video.page.html’,
styleUrls: [’./upload-video.page.scss’],
})
export class UploadVideoPage implements OnInit {

constructor(
public navCtrl: NavController,
private camera: Camera,
//mobad
public adMob: AdMobFree,
//mobad
private transfer: FileTransfer,
private file: File,
private filePath: FilePath,
private filechooser: FileChooser,
private alertCtrl: AlertController,
private authService: AuthService,
private router: Router,
public network: Network,
public screenOrientation: ScreenOrientation,
public globalServices: GlobalService,
private loadingCtrl: LoadingController
) {

}

public selectedVideo; //= “https://res.cloudinary.com/demo/video/upload/w_640,h_640,c_pad/dog.mp4”;
public uploadedVideo;
public retrievedFile;

isUploading: boolean = false;
uploadPercent: number = 0;
videoFileUpload: FileTransferObject;
loader;
filename;
dirpath;
dirUrl;
url;

showLoader() {
this.loader = this.loadingCtrl.create({
message: ‘Please wait…’
});
this.loader.present();
}

dismissLoader() {
this.loader.dismiss();
}

async presentAlert(title, message) {
let alert = await this.alertCtrl.create({
header: title,
subHeader: message,
buttons: [‘Dismiss’]
});
alert.present();
}

cancelSelection() {
this.selectedVideo = null;
this.uploadedVideo = null;
}

selectVideo() {
const options: CameraOptions = {
mediaType: this.camera.MediaType.VIDEO,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}

this.camera.getPicture(options)
  .then(async (videoUrl) => {
    if (videoUrl) {
      this.showLoader();
      this.uploadedVideo = null;

      this.filename = videoUrl.substr(videoUrl.lastIndexOf('/') + 1);
      this.dirpath = videoUrl.substr(0, videoUrl.lastIndexOf('/') + 1);

      this.dirpath = this.dirpath.includes("file://") ? this.dirpath : "file://" + this.dirpath;

      try {
        this.dirUrl = await this.file.resolveDirectoryUrl(this.dirpath);
        this.retrievedFile = await this.file.getFile(this.dirUrl, this.filename, {});

      } catch (err) {
        this.dismissLoader();
        return this.presentAlert("Error", "Something went wrong.");
      }

      this.retrievedFile.file(data => {
        this.dismissLoader();
        if (data.size > MAX_FILE_SIZE) {
          return this.presentAlert("Error", "You cannot upload more than 10mb.");
        }

        if (data.type !== ALLOWED_MIME_TYPE) {

          return this.presentAlert("Error", "Incorrect file type.");
        }

        this.selectedVideo = this.retrievedFile.nativeURL;
      });
    }
  },
    (err) => {
      console.log(err);
    });

}

uploadVideo() {
this.url = baseUrl + “/video/upload”;

this.filename = this.selectedVideo.substr(this.selectedVideo.lastIndexOf('/') + 1);

let options: FileUploadOptions = {
  fileName: this.filename,
  fileKey: "video",
  mimeType: "video/mp4"
}

this.videoFileUpload = this.transfer.create();

this.isUploading = true;

this.videoFileUpload.upload(this.selectedVideo, this.url, options)
  .then((data) => {
    this.isUploading = false;
    this.uploadPercent = 0;
    return JSON.parse(data.response);
  })
  .then((data) => {
    this.uploadedVideo = data.url;
    this.presentAlert("Success", "Video upload was successful.");
  })
  .catch((err) => {
    this.isUploading = false;
    this.uploadPercent = 0;
    this.presentAlert("Error", "Error uploading video.");
  });

this.videoFileUpload.onProgress((data) => {
  this.uploadPercent = Math.round((data.loaded / data.total) * 100);
});

}

cancelUpload() {
this.videoFileUpload.abort();
this.uploadPercent = 0;
}

ngOnInit() {
}

}


upload-video.html

Please select a video for upload from your gallery

Select Video
<!-- <video controls [src]="selectedVideo"></video> -->

<video preload="auto">
  <source [src]="selectedVideo" type="video/mp4" />
</video>

<div class="button-options" *ngIf="!uploadedVideo && !isUploading">
  <ion-button clear (click)="cancelSelection()">
    <ion-icon name="close-circle" color="danger"></ion-icon>
  </ion-button>
  <ion-button clear (click)="uploadVideo()">
    <ion-icon name="checkmark-circle" color="secondary"></ion-icon>
  </ion-button>
</div>

<div *ngIf="isUploading">
  <div class="uploading">
    <p><ion-spinner name="bubbles"></ion-spinner></p>
    <p>Uploading - {{ uploadPercent }}% Complete</p>
  </div>
  <div class="button-options">
    <ion-button clear (click)="cancelUpload()">
      <ion-icon name="close-circle" color="danger"></ion-icon>
    </ion-button>
  </div>
</div>

<div class="button-options" *ngIf="uploadedVideo">
  <ion-button clear (click)="cancelSelection()">
    Start Over
  </ion-button>
</div>

app-module.ts

import { NgModule } from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { AppComponent } from ‘./app.component’;

import { AppRoutingModule } from ‘./app-routing.module’;

import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;

import { HttpConfigInterceptor} from ‘./interceptor/httpconfig.interceptor’;

import { GlobalService } from ‘./services/global.service’;

import { Camera } from ‘@ionic-native/camera/ngx’;

import { File } from ‘@ionic-native/file/ngx’;

import { FileTransfer, FileUploadOptions, FileTransferObject } from ‘@ionic-native/file-transfer/ngx’;

import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;

import { FilePath } from ‘@ionic-native/file-path/ngx’;

import { IonicStorageModule } from ‘@ionic/storage’;

import { ReactiveFormsModule, FormsModule } from ‘@angular/forms’;

// import { AppUpdate } from ‘@ionic-native/app-update/ngx’;

import { AppVersion } from ‘@ionic-native/app-version/ngx’;

import { ServiceWorkerModule } from ‘@angular/service-worker’;

import { environment } from ‘…/environments/environment’;

//admob

import { AdMobFree } from ‘@ionic-native/admob-free/ngx’;

import { Network } from ‘@ionic-native/network/ngx’;

import { Dialogs } from ‘@ionic-native/dialogs/ngx’;

import { SocialSharing } from ‘@ionic-native/social-sharing/ngx’;

import { OneSignal } from ‘@ionic-native/onesignal/ngx’;

import { Deeplinks } from ‘@ionic-native/deeplinks/ngx’;

import { ScreenOrientation } from ‘@ionic-native/screen-orientation/ngx’;

import { PopoverComponent } from ‘./popover/popover.component’;

import { PhotoViewer } from ‘@ionic-native/photo-viewer/ngx’;

@NgModule({

declarations: [

AppComponent,

PopoverComponent,

],

entryComponents: [

PopoverComponent

],

imports: [

FormsModule,

ReactiveFormsModule,

BrowserModule,

IonicModule.forRoot(),

AppRoutingModule,

HttpClientModule,

IonicStorageModule.forRoot(),

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

],

providers: [

StatusBar,

ScreenOrientation,

SplashScreen,

Deeplinks,

Network,

PhotoViewer,

Dialogs,

GlobalService,

//admob

AdMobFree,

//admob

SocialSharing,

OneSignal,

Camera,

File,

FileTransfer,

FileChooser,

FilePath,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

// AppUpdate,

AppVersion,

{ provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }

],

bootstrap: [AppComponent]

})

export class AppModule {}