cordova-plugin-photo-library: GET cdvphotolibrary://photo?photoId=xxx net::ERR_UNKNOWN_URL_SCHEME

So I was digging into the code to figure out how to add support for file system URLs, when I discovered that those are already available. The URL is appended the the photo id, separated by a semicolon. I retrieve it and use it in HTML with success even in ionic-webview like so:

        this.photoLibrary
          .requestAuthorization()
          .then(() => {
            this.photoLibrary
              .getLibrary()
              .subscribe({
                next: library => {
                  library.forEach(libraryItem => {
                    let url: string;
                    if (libraryItem.id.split(';').length > 0) {
                      url = 'file://' + libraryItem.id.split(';')[1];
                    }
                    // Get http://localhost url
                    url = (window as any).Ionic.WebView.convertFileSrc(url)
                  });
                },
                error: err => {
                  console.log('could not get photos');
                },
                complete: () => {
                  console.log('done getting photos');
                  console.log(this.images);
                  count = 0;
                },
              });
          })
          .catch(err => {
            console.log("permissions weren't granted");
          });

@Alain1405 you did it. To solve the Problem I changed some things because I am using Ionic.

1. I installed Ionic Webview (ionic cordova plugin add cordova-plugin-ionic-webview and npm install @ionic-native/ionic-webview).
2. I made some changes in the request to get the pictures and I sanitized the url using bypassSecurityTrustUrl(imageURL);

` this.photoLibrary.requestAuthorization().then(() => { photolib.getLibrary( (chunk)=>{ chunk.library.forEach( (libraryItem:any)=> {

        let url: string;
        if (this.platform.is('android')) {
          if (libraryItem.id.split(';').length > 0) {
            url = 'file://' + libraryItem.id.split(';')[1];
          }
        }else{
          url = 'file://' + libraryItem.filePath;
        }
       
        url = this.webview.convertFileSrc(url);
        
        
        gbilder.push(
          {
            thumbnailURL:this.getImgContent(url),
            libraryItem : libraryItem           
          }
        );
         
      });
      if (chunk.isLastChunk){
        this.library=gbilder;
       }
       
    },
    (err)=>console.log(err)        
  );
})
.catch(err => console.log('permissions weren\'t granted'));

`

And:

getImgContent(imageURL):SafeUrl{ return this.sanitizer.bypassSecurityTrustUrl(imageURL); }

And in the template:

` <virtual-scroller #scroll [items]=“library”> <div *ngFor=“let img of scroll.viewPortItems” style=“display: inline-block;”>

  <button (click)="itemTapped($event, img.libraryItem)">
    <img [src]="img.thumbnailURL" width="100" height="100">
  </button>

</div>

</virtual-scroller> `

Miguel

I uninstalled ionic webview and one can see all pictures of the gallery. The problem is that Filereader() does not work. It does not give any callback (readAsArrayBuffer) and one can not store the picture locally. In my App I have to use Filereader() to load Blobs and then upload them. Because Filereader does not work, I cannot use this plugin.

I installed ionic webview again and Filereader() finally works , but the list with pictures of the Photo Library are not showed (Android and iOS). The debug shows: Failed to load resource: unsupported URL or ERR_UNKNOWN_URL_SCHEME.

Please let me know, if I am doing something wrong or if you have solved this problem.

Here is my Ionic configuration.

Ionic:

ionic (Ionic CLI) : 4.1.1 (C:\Users.…\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.2.5, (and 22 other plugins)

System:

Android SDK Tools : 26.1.1 (C:\Users.…\AppData\Local\Android\android-sdk) NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe) npm : 4.6.1 OS : Windows 10

Regards,

Miguel

Also having this issue. From what I have read it’s an issue with WKWebView and has been so since forever.