Ionic 3 Unbale to upload video, getting 405 The resource doesn't support the specified Http Verb

When I try to record and upload a video to the server, I’m getting The resource doesn’t support the specified Http Verb error. I have ***** for all headers on the API end. But no use. Please help me out this.

thank you
here is the code.

import { Component, ViewChild } from '@angular/core';

import { File } from '@ionic-native/file';

import { normalizeURL } from 'ionic-angular';

import { Base64 } from '@ionic-native/base64';

import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';

import { VideoEditor, CreateThumbnailOptions } from '@ionic-native/video-editor';

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

import { NavController, AlertController, LoadingController } from 'ionic-angular';

const baseUrl = "here my URL"

const MAX_FILE_SIZE = 5 * 1024 * 1024;

const ALLOWED_MIME_TYPE = "video/mp4";

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  videoPath: string;

  thumbnail;

  uploadPercent: number = 0;

  videoFileUpload: FileTransferObject;

  loader;

  isUploading: boolean = false;

  // selectedVideo: string;

  @ViewChild('myvideo') myVideo: any;

  constructor(public navCtrl: NavController, private transfer: FileTransfer, public file: File, public mediaCapture: MediaCapture, public base64: Base64,

    private videoEditor: VideoEditor,

    private alertCtrl: AlertController, private loadingCtrl: LoadingController) {

  }

  record() {

    const options: CaptureVideoOptions = {

      limit: 1,

      quality:0

      // portraitOverlay: 'assets/img/camera/overlay/portrait.png',

      // landscapeOverlay: 'assets/img/camera/overlay/landscape.png'

    }

    this.mediaCapture

      .captureVideo(options)

      .then(async (res: MediaFile[]) => {

        console.log(res[0].fullPath)

        this.videoPath = res[0].fullPath;

        let video = this.myVideo.nativeElement;

        video.src = this.videoPath;

      // alert('video path...'+this.videoPath)

        // this.createThumbnail(res[0].fullPath);

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

        var dirpath =  this.videoPath.substr(0,  this.videoPath.lastIndexOf('/') + 1);

    

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

        // this.presentAlert('filename....',filename)

        // alert('dirpath....'+dirpath)

        try {

          var dirUrl: any = this.file.resolveDirectoryUrl(dirpath);

          var retrievedFile: any = this.file.getFile(dirUrl, filename, {});

    

        } catch (err) {

          this.dismissLoader();

          return this.presentAlert("Error", "Something went wrong.");

        }

        // this.selectedVideo = retrievedFile.nativeURL;

        // retrievedFile.file(data => {

        //   this.dismissLoader();

        //   if (data.size > MAX_FILE_SIZE) {

        //     return this.presentAlert("Error", "You cannot upload more than 5mb.");

        //   }

        //   if (data.type !== ALLOWED_MIME_TYPE) {

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

        //   }

    

        //   this.selectedVideo = retrievedFile.nativeURL;

        // });

     

      })

      .catch(err => console.log('Something went wrong', JSON.stringify(err)));

  }

  createThumbnail(videodata) {

  

    // creating thimbnail code

    let thumbnailoption: CreateThumbnailOptions = {

      fileUri: videodata,

      quality: 100,

      atTime: 1,

      outputFileName: 'thumbnailImage',

    }

    this.videoEditor.createThumbnail(thumbnailoption).then((thumbnailPath) => {

      console.log("Thumbnail Responce =>", thumbnailPath)

      this.thumbnail = 'file://' + thumbnailPath;

      // this.thumbnail = normalizeURL(this.thumbnail);

      // alert('path....>>>'+ this.thumbnail)

      this.base64.encodeFile(this.thumbnail).then((base64File: string) => {

        console.log('base64........' + base64File);

        this.thumbnail = base64File

        alert('path....>>>' + base64File)

      }, (err) => {

        console.log('base64........' + err);

        alert('base64....>>>' + err)

      });

    }).catch((err) => {

      console.log("Thumbnail Responce Error=>", err)

      alert('Error....' + err)

    })

  }

  cancelUpload() {

    this.videoFileUpload.abort();

    this.uploadPercent = 0;

  }

  uploadVideo() {

    // var url = baseUrl +  "/video/upload";

    this.isUploading = true;

    // alert('path....'+this.selectedVideo)

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

    // alert('name....'+filename)

    // alert('selectedVideo....'+this.selectedVideo)

    var options: FileUploadOptions = {

      fileName: filename,

      fileKey: "video",

      mimeType: "video/mp4",

      httpMethod:"PUT",

      headers: {

    //my headers here
      }

    }

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

    this.videoFileUpload.upload(this.videoPath, baseUrl, options)

      .then((data) => {

        this.uploadPercent = 0;

        this.isUploading = false;

        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."+JSON.stringify(err));

      });

    this.videoFileUpload.onProgress((data) => {

      this.uploadPercent = Math.round((data.loaded / data.total) * 100);

    });

  }

  presentAlert(title, message) {

    let alert = this.alertCtrl.create({

      title: title,

      subTitle: message,

      buttons: ['Dismiss']

    });

    alert.present();

  }

  showLoader() {

    this.loader = this.loadingCtrl.create({

      content: 'Please wait...'

    });

    this.loader.present();

  }

  dismissLoader() {

    this.loader.dismiss();

  }

}

2 posts - 2 participants

Read full topic