What is the best way to showcase pictures retrieved from Cordova PhotoLibrary?

Question

What is the best way to showcase pictures retrieved from Cordova PhotoLibrary?

I've encountered an issue with displaying images in the Image Gallery on my Android device. Although the PhotoLibrary plugin successfully returns a list of image URLs, I am having difficulty loading them into img tags.

            window['cordova']['plugins']['photoLibrary'].getLibrary(
                result => console.log(libraryItem),
                err => console.log(err);
                },
                {
                    thumbnailWidth: 512,
                    thumbnailHeight: 384,
                    quality: 0.8,
                    includeAlbumData: true
                });

While this code retrieves the image URLs, I'm unable to actually display them. The data returned looks like:

creationDate: Fri Nov 03 2017 20:06:01 GMT-0400 (EDT)
fileName: "2017-10-4-1.jpg"
height: 960
id: "1907;/storage/emulated/0/Pictures/Timelapser/2017-10-4-1.jpg"
latitude: 0
longitude: 0
photoURL: "cdvphotolibrary://photo?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg"
thumbnailURL: "cdvphotolibrary://thumbnail?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg&width=512&height=384&quality=0.8"
width: 1280

Attempts to use photoURL or thumbnailURL in the img src attribute have been unsuccessful. I've tried decoding the URL, using different parts of the link, but nothing seems to work.

android angular cordova typescript ionic3

Answer 1

Answer №1

To integrate the Native Photo Library plugin, you will need to utilize the cdvphotolibrary pipe as demonstrated below.

For a functional example, refer to this Git project.

html

<ion-grid no-padding margin-top>
    <ion-row class="row">
      <ion-col col-6 *ngFor="let data of library">
        <img [src]="data?.thumbnailURL | cdvPhotoLibrary">
      </ion-col>
    </ion-row>
  </ion-grid>

ts

// Fetch Photos
fetchPhotos() {
    this.platform.ready().then(() => {
      this.library = [];

      this.photoLibrary.getLibrary({ thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT }).subscribe({
        next: (chunk) => {
          this.library = this.library.concat(chunk);
          this.cd.detectChanges();
        },
        error: (err: string) => {
          if (err.startsWith('Permission')) {
            this.platform.ready().then(() => {
              this.photoLibrary.requestAuthorization({ read: true })
                .then(() => {
                }).catch((err) => {
                  let message = 'requestAuthorization error: ${err}';
                  this.showToast.showErrorToast(message);
                });
            });
          } else { // Real error
            let message: 'getLibrary error: ${err}';
            this.showToast.showErrorToast(message);
          }
        },
        complete: () => {
          // Library completely loaded
        }
      });
    });
  }

cdv-photo-library.ts (pipe)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'cdvPhotoLibrary',
})
export class CdvPhotoLibraryPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url: string) {
    if (url != null) {
      return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
    }
  }
}

Answer 2

To integrate the Native Photo Library plugin, you will need to utilize the cdvphotolibrary pipe as demonstrated below.

For a functional example, refer to this Git project.

html

<ion-grid no-padding margin-top>
    <ion-row class="row">
      <ion-col col-6 *ngFor="let data of library">
        <img [src]="data?.thumbnailURL | cdvPhotoLibrary">
      </ion-col>
    </ion-row>
  </ion-grid>

ts

// Fetch Photos
fetchPhotos() {
    this.platform.ready().then(() => {
      this.library = [];

      this.photoLibrary.getLibrary({ thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT }).subscribe({
        next: (chunk) => {
          this.library = this.library.concat(chunk);
          this.cd.detectChanges();
        },
        error: (err: string) => {
          if (err.startsWith('Permission')) {
            this.platform.ready().then(() => {
              this.photoLibrary.requestAuthorization({ read: true })
                .then(() => {
                }).catch((err) => {
                  let message = 'requestAuthorization error: ${err}';
                  this.showToast.showErrorToast(message);
                });
            });
          } else { // Real error
            let message: 'getLibrary error: ${err}';
            this.showToast.showErrorToast(message);
          }
        },
        complete: () => {
          // Library completely loaded
        }
      });
    });
  }

cdv-photo-library.ts (pipe)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'cdvPhotoLibrary',
})
export class CdvPhotoLibraryPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url: string) {
    if (url != null) {
      return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
    }
  }
}

What is the best way to showcase pictures retrieved from Cordova PhotoLibrary?

Answer №1

Similar questions

Discovering React Styled Components Within the DOM

Exploring the Children Property in TypeScript and the Latest Version of React

Discover the perfect way to implement true lazyloading using NativeScript Angular tabs and BottomNavigation

The 'undefined' type cannot be assigned to the '(number | null)[]' type

Uploading images using the power of Angular and Node.js

When the admin clicks the start button, redirect all users to the designated page

Incorporate dynamic HTML snippets into the DOM with Angular 4

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Issue with Angular 4: 'HttpClient' name not found

The takeUntil function will cancel an effect request if a relevant action has been dispatched before

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

Performance challenges with rendering SVG in ngFor due to the presence of a highly nested array structure - in

"Retrieve the x-coordinate position of a box within a specific div using

The system is unable to convert the lengthy error message into a valid Element Room Database structure

Angular 8: Setting the Default Dropdown Option to the Newest Value in the Updated ArrayList

Is it possible to create a nested object inside of an array?

Employ Regular Expression in Android to extract phone numbers from website text data

Using the amDateFormat pipe in Ionic 3's Lazy Loading feature

What would be the best dimension for an Angular 11 module?

The error message "TypeError: Attempting to access the 'map' property of an undefined value (React JS)" was displayed