Ad

Conflict On Using Cordova-plugin-ionic-webview Version?

I'm working on an ionic3 application. I need to take an image from the user either by camera or gallery, first saves it to the local directory then upload the image to the server. I used the following step by step tutorial: https://devdactic.com/ionic-2-images/ Uploading the photo is working like a charm, but while saving the image to the local directory and save the path on local storage, after retrieving from storage it shows the following error: enter image description here .
As it's obvious it complains about Not allowed to load local resource. Next, I started to google for the solution, and I found this solution in StackOverflow and this in GitHub. As they both suggested, the problem is with cordova-plugin-ionic-webview, so I need to downgrade the version. When I tried their solution, the uploading and showing the image to the user is working perfectly, however, it creates problem other parts of the application which is loading data from asset no matter what; images, fonts. Shows the following error enter image description here.Next I found a solutionf for the problem in GitHub here, as it suggested and accepted by most users we need to use the latest version of **cordova-plugin-ionic-webview **, which of course it would cause the first problem for me. I'm gonna upload the codes here as well.`

getImage() {
    this.presentActionSheet();
  } //end getImage
  public uploadImage() {
    console.log('Uploading the image');
    console.log(this.lastImageL);
    var targetPath = this.pathForImage(this.lastImage);

    console.log(targetPath);

    var url = "https://dev.raihan.pomdev.net/wp-json/raihan/v1/profilePhoto";


    var filename = this.lastImage;
    console.log(' targetPath  :   ', targetPath);
    console.log('File Name : ', filename)
    console.log(url, " IS the URL");
    var options = {
      fileKey: "image",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params: {
        'image': filename,
        'user_id': 79
      }
    };

    const fileTransfer: TransferObject = this.transfer.create();

    this.loading = this.loadingCtrl.create({
      content: 'منتظر باشید',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, url, options).then(data => {
      this.loading.dismissAll()

      this.presentToast(' . عکس شما موفقانه ذخیره شد');

      this.storage.set("Profile_Photo", targetPath).then((data) => {
        console.log('response of uploading the image ', data);
        console.log('Target Path ', targetPath);
        console.log('In set storage ', targetPath);
        $("#Photo").attr("src", targetPath);
        $("#Photo2").attr("src", targetPath);
        console.log('myphoto ', targetPath);
      });
    }, err => {
      this.loading.dismissAll()
      this.presentToast('مشکلی در قسمت ذخیره کردن عکس شما وجود دارد  ' + err);
      console.log('error sending the image');
      console.log(err);
    });
  }
  public takePicture(sourceType) {

    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {

      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {
            let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
            let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
          });
      } else {
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      }
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad CaptureImagePage');
  }
  private createFileName() {
    var d = new Date(),
      n = d.getTime(),
      newFileName = n + ".jpg";
    return newFileName;
  }

  // Copy the image to a local folder
  private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
      this.lastImage = newFileName;
      this.uploadImage();
    }, error => {
      this.presentToast('Error while storing file. ' + error);
    });
  }

  private presentToast(text) {
    let toast = this.toastCtrl.create({
      message: text,
      duration: 5000,
      position: 'center'
    });
    toast.present();
  }

  // Always get the accurate path to your apps folder
  public pathForImage(img) {
    if (img === null) {
      return '';
    } else {
      return cordova.file.dataDirectory + img;
    }
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

` Now I'm confused which version of **cordova-plugin-ionic-webview ** I should use? Is there someone who could help me?

Note: Thanks for your patience to read all the questions.

Ad

Answer

I would try to use the latest version of the WebView if possible, and then use the window.Ionic.WebView.convertFileSrc() method on the file:/// path before putting it on a page for display. Those tips can be seen here:

Cordova and Capacitor apps are hosted on a local HTTP server and are served with the http:// protocol. Some plugins, however, attempt to access device files via the file:// protocol. To avoid difficulties between http:// and file://, paths to device files must be rewritten to use the local HTTP server. For example, file:///path/to/device/file must be rewritten as http://://path/to/device/file before being rendered in the app.

For Cordova apps, the Ionic Web View plugin provides a utility function for converting File URIs: window.Ionic.WebView.convertFileSrc(). There is also a corresponding Ionic Native plugin: @ionic-native/ionic-webview.

Here is a sample method I use, which works fine in the 4.x webview:

  getNormalizedUrl(path: string): SafeResourceUrl {
      let newPath = this.domSanitizer.bypassSecurityTrustUrl(
          window.Ionic.WebView.convertFileSrc(path));
      return newPath;
  }
Ad
source: stackoverflow.com
Ad