GET cdvphotolibrary://photo?photoId=xxx net::ERR_UNKNOWN_URL_SCHEME

[icchio]

Hi.... I'm trying to use Photo Library with Ionic 3... Unfortunately i don't know how to resolve this error both in IOS and Android.

GET cdvphotolibrary://photo?photoId=xxx net::ERR_UNKNOWN_URL_SCHEME

It's something that I miss or is a bug with the WKWebView

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

this is how i call the image:

this.photoLibrary.getPhotoURL(img.id).then( image => { this.dettImg = this.sanitizer.bypassSecurityTrustUrl(image) })

Thank you for the help.

[timmyrosen]

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

[mixuala]

I am testing with ionic v4 and I'm getting this error when using the cordova plugin directly

Failed to load resource: unsupported URL

I assume this is the same WKWebView issue.

Can someone confirm that cdvphotolibrary:// URIs are incompatible with WKWebView? If so, we can all stop searching for a workaround and just use DataURLs or a localhost webserver.

[UPDATE] I saw this post about getting access through localhost––has anyone tried this?

• https://medium.com/collaborne-engineering/my-cordova-nightmares-accessing-photos-from-the-phones-gallery-7528a0860555
• https://github.com/ankon/cordova-plugins/tree/master-collaborne/local-webserver

[MASP3000]

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 ([email protected]) 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

[RidClick]

Has anyone been able to find a solution to this?

I've tried this today, but the error is still there, some suggestion of some other plugin or how to save photos in the library?

[RenanLopes77]

Maybe this can help: https://medium.com/deyvin/ionic-3-4-fixing-not-allowed-to-load-local-resource-camera-file-uri-3c1db24ad874

[MASP3000]

Hello RenanLopes77,

Your solution sounds like to "to undress a saint to wear another" (Chilean saying). I mean, you suggest to downgrade a plugin to make work this plugin. I think that a solution should be better to improve/adapt this photo library plugin to works with ionic webview (or with that causes this problem).

You wrote "maybe this can help". Did yout test it? Did it work?

In my case I do not have problems with the functions of this plugin (save, get etc). The problem is to show the pictures using cdvphotolibrary pipe. The sanitization of the path to each photo does not work without deactivating ionic-webview.

Here is what I obtain: https://drive.google.com/file/d/1R84qtfyK3KKe0W34hBy0jRhZQgJU4gUL/view?usp=sharing

Regards

Miguel

[Alain1405]

This is related to https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/54

[Alain1405]

A solution would be that this plug-in would return file:// urls, which can be dealt with.

[MASP3000]

I gave up. I am using now Camera plugin to pick the Pictures.

[RidClick]

I gave up. I am using now Camera plugin to pick the Pictures.

Totally agree, here is a guide that has worked great for me.

https://devdactic.com/ionic-4-image-upload-storage/

[Alain1405]

@viskin I'd be willing to try implement a solution to this issue if we agree on what could be best. We could have the plugin return, optionally, file:// urls or FileEntry type (talking Ionic here).

[mixuala]

I hacked the plugin to return images as dataURLs. but I think if I really knew what I was doing, I could save the dataURLs to App storage and access by file:// urls

https://github.com/mixuala/cordova-plugin-photo-library/commit/3992baa1f9c39c7be52e339cc8d31c3b56fcee5e

[Alain1405]

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");
          });

[MASP3000]

@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>

`

Miguel

[Shtibel]

Hi @MiguelSyll and @Alain1405

Your solution gets the BIG image. How can I get the real thumbnail image ?

[pumbosha]

Hi @MiguelSyll and @Alain1405

Your solution gets the BIG image. How can I get the real thumbnail image ?

You can use base64 thumbnail using method: libraryItem.getThumbnail()

[Shtibel]

Hi @MiguelSyll and @Alain1405 Your solution gets the BIG image. How can I get the real thumbnail image ?

You can use base64 thumbnail using method: libraryItem.getThumbnail()

But when you load all the images it is very inefficient to do that one by one

[MASP3000]

did you try it? I mean to use getThumbnail(). At least for me, it does not work. If you have a working code, please paste it in the answers.

Miguel

Am Mo., 1. Juli 2019 um 18:57 Uhr schrieb Shtibel <[email protected]

:

Hi @MiguelSyll https://github.com/MiguelSyll and @Alain1405 https://github.com/Alain1405 Your solution gets the BIG image. How can I get the real thumbnail image ?

You can use base64 thumbnail using method: libraryItem.getThumbnail()

But when you load all the images it is very inefficient

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/terikon/cordova-plugin-photo-library/issues/150?email_source=notifications&email_token=ABTM3ULME6MTEFGQE56EJMDP5IZPXA5CNFSM4FYHLZD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODY6XUIY#issuecomment-507345443, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTM3UINVKEPPWKAP7BJRFTP5IZPXANCNFSM4FYHLZDQ .

[MASP3000]

Hello. Finally I solved so:

this.photoLibrary.getThumbnail(libraryItem).then(urlblob => {

          let url=URL.createObjectURL(urlblob);
          url = this.webview.convertFileSrc(url);
          
          myarraywithpictures.push(
            {
              thumbnailURL:this.getImgContent(url)
            }
          );

});

Miguel

[mixuala]

@MiguelSyll I finally got a chance to play around with your solution today, and it generally works.

However, on ios it fails when the file is of type HEIC. Has anyone found a workaround that automatically grabs a JPG version?

[MASP3000]

I am not using Photolibrary plugin in iOS. I am using the plugin Camera to pick up pictures from de Photo Gallery.

I use the Photolibrary plugin in Android, only because the Camera Plugin does not work correctly in Android.

Then, I think that I can not respond your question or give you some help. Sorry.

Regards,

Miguel Syll

Am Mi., 31. Juli 2019 um 12:02 Uhr schrieb mixuala <[email protected]

:

@MiguelSyll https://github.com/MiguelSyll I finally got a chance to play around with your solution today, and it generally works.

However, on ios it fails when the file is of type HEIC. Has anyone found a workaround that automatically grabs a JPG version?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/terikon/cordova-plugin-photo-library/issues/150?email_source=notifications&email_token=ABTM3ULRFZ5IUBSUEZK7HSLQCFPLJA5CNFSM4FYHLZD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3GYCTA#issuecomment-516784460, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTM3UOAMARBGDO5I7GUKV3QCFPLJANCNFSM4FYHLZDQ .