Upload captured video to server angular ionic


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() {
  (data: MediaFile[]) => {
    if (data.length > 0) {
  (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 => {
  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


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

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

  return new Promise(resolve => {
      .then(data => {
        alert('yes' + JSON.stringify(data))
      .catch(data => {
        alert('err'+ JSON.stringify(data))


And html code

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

   <ion-button (click)="recordVideo()"> Capture Video </ion-button>
   <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-item-options side="start">
      <ion-item-option (click)="deleteFile(f)" color="danger">
        <ion-icon name="trash" slot="icon-only"></ion-icon>



REST is a contract between two parties, so one side (the client) can’t just unilaterally dictate the protocol. Are you certain that the server is prepared to accept multipart/form-data?

1 Like

Actually the server side wasn’t accepting the type.