Ionic 5 capacitor/angular preview files from external url's

Question

I have tried previewanyfile cordova plugin to open files from external url's in Ionic 5 application. It works well with android but on IOS I noticed sometimes it doesnt preview/open PDF files. Just a grey screen with the file name on it. But strangely some PDF files open. file preview screen

 previewProductDocument(url: string) {
    const loading = await this.loadingController.create({
      message: 'Loading document...',
    });
    loading.present().then(() => {
      this.previewAnyFile.preview(url).then((res) => {
        loading.dismiss();
      }).catch((err) => {
        loading.dismiss();
        this.presentToast('Error previewing the document try later', 'danger');
      });
    });
  }

This is the plugin I have used https://ionicframework.com/docs/native/preview-any-file

capacitor version "@capacitor/core": "^2.2.0",

Noticed this behavior only in IOS simulator + on Real IOS device. Any idea what is going on here?

Answer 1

Special character (%2F) in the link is the cause of the issue.

For a quick win; either change the link or sanitise before processing.

In this case url.replace('%2F', '/') should work.

However, another link may, probably, contain a different character. Without being 100% sure, it worth a try decodeURI , which is decodeURI(url) .