Upload captured video to server angular ionic

0

I am trying to upload captured video to the server from my ionic app. I am using cordova media capture plugin. I have seen some implements with File transfer but the plugin self is deprecated and I am trying to use post method. I was told to convert my video path URI to a blob and then attach that blob to FormData object! But I am not sure how to do that. The function I am using is below sendVideo(). I would really appreciate your help.

Here is my .ts file

recordVideo() {
this.mediaCapture.captureVideo().then(
  (data: MediaFile[]) => {
    if (data.length > 0) {
      this.copyFileToLocalDir(data[0].fullPath);
    }
  },
  (err: CaptureError) => console.error(err)
);
}

copyFileToLocalDir(fullPath) {
let myPath = fullPath;
// Make sure we copy from the right location
if (fullPath.indexOf('file://') < 0) {
  myPath = 'file://' + fullPath;
}

const ext = myPath.split('.').pop();
const d = Date.now();
const newName = `${d}.${ext}`;

const name = myPath.substr(myPath.lastIndexOf('/') + 1);
const copyFrom = myPath.substr(0, myPath.lastIndexOf('/') + 1);
const copyTo = this.file.dataDirectory + MEDIA_FOLDER_NAME;

this.file.copyFile(copyFrom, name, copyTo, newName).then(
  success => {
    this.loadFiles();
  },
  error => {
    console.log('error: ', error);
  }
);
}

openFile(f: FileEntry) {
if (f.name.indexOf('.MOV') > -1 || f.name.indexOf('.mp4') > -1) {
  // E.g: Use the Streaming Media plugin to play a video
  this.streamingMedia.playVideo(f.nativeURL);

  
}} 

sendVideo(blobData, f: FileEntry) {
  var formData = new FormData();
  formData.append('video', blobData, 'f:FileEntry');


  // var video = {
  //   video: f.nativeURL
  // }

  return new Promise(resolve => {
    this.api.post('/video-test/upload-video',formData)
      .then(data => {
        alert('yes' + JSON.stringify(data))
        resolve();
      })
      .catch(data => {
        alert('err'+ JSON.stringify(data))

        resolve();
      });
  });
}

And html code

    <ion-header>
    <ion-toolbar class="flex flex-align">
      <ion-buttons slot="start">
       <ion-button  (click)="dismiss()" class="close"> Close </ion-button>
       </ion-buttons>
      </ion-toolbar>
    </ion-header>
   <ion-content>

   <ion-button (click)="recordVideo()"> Capture Video </ion-button>
   <ion-list>
   <ion-item-sliding *ngFor="let f of files">
    <ion-button (click)="sendVideo(f)"> Send Video </ion-button>
    <ion-item (click)="openFile(f)">
      <ion-icon name="videocam" slot="start" *ngIf="f.name.endsWith('MOV') || f.name.endsWith('mp4')"></ion-icon>

      <ion-label class="ion-text-wrap">
        <p>{{ f.name }}</p>
        <p>{{ f.fullPath }}</p>
      </ion-label>
    </ion-item>

    <ion-item-options side="start">
      <ion-item-option (click)="deleteFile(f)" color="danger">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-item-option>
    </ion-item-options>

    </ion-item-sliding>
    </ion-list>

    </ion-content>

1 post - 1 participant

Read full topic