Ionic Native video uploads a corrupted file

Question

I’m currently having a persistent problem with my Ionic Native app.

I'm trying to upload a video file to firebase storage, I handle the recording with Media Capture:

"@ionic-native/media-capture": "^5.36.0""

this far so good.. when I try to upload this new file to firestore the file always uploads corrupted... or the file size is only 9Bytes!??

this is the code i'm using right now:

this.mediaCapture.captureVideo({duration: 10, quality: 0}).then(
        (data: MediaFile[]) => {
          if (data.length > 0) {
            let originname = data[0].fullPath.substr(data[0].fullPath.lastIndexOf('/') + 1);
            let originpath = data[0].fullPath.substr(0, data[0].fullPath.lastIndexOf('/') + 1);            
            
            let alerta = this.alerts.create({
              buttons: ['ok'],
              message: this.file.externalDataDirectory
            });
            alerta.then(set => set.present());
            this.file.copyFile(originpath, originname, this.file.externalDataDirectory, 'video.mp4')
            .then(result =>{
              //let video = (document.getElementById('myvideo') as HTMLVideoElement).src = result.nativeURL;
           

              //let path =this.webview.convertFileSrc(result.nativeURL);
              // this.video = path;

              // let alert = this.alerts.create({
              //   buttons: ['ok'],
              //   message: path
              // });
              // alert.then(set => set.present());
              
              
              // let videoname = path.substr(path.lastIndexOf('/') + 1);
              // let videopath = path.substr(0, path.lastIndexOf('/') + 1);        
              const data = Filesystem.readFile({
                path: result.nativeURL
              })
              .then(data =>{
                let blob= new Blob([data.data], {type: 'video/mp4'});
                let ref = this.storage.storage.ref().child('videoTests').child('video.mp4')
                ref.put(blob).then(
                  result =>{
                    let url = this.storage.ref('/videoTests/'+588+'.mp4').getDownloadURL();
                    url.subscribe(result =>{
                      console.log(result);
                      let alert = this.alerts.create({
                        buttons: ['ok'],
                        message: result
                      });
                      alert.then(set => set.present());
                      })
                  }) 

NOTE: for context I've tried to use native File readAsDataURL but the promise never resolves.. in the console I see it processing but at the very end it just stuck and never resolves..

• Ionic 6.16.3
• Angular Core 12.1.1
• Node 14.15.0

any help or guidance is greatly appreciated I have days stuck at this point now...

[SOLVED]

Answer 1

SOLVED: this is nows solved... the result of Filesystem.readFile is base64 so all I have to do is to process this result as base64 and then convert it to a blob this successfully uploads a valid video file.