jakedavies-cordova-plugin-photo-library
Advanced tools
Plugin that just gets photos from the gallery
That's how it looks and performs in real app:
Demo projects (runnable online):
Displays photo library on cordova's HTML page, by URL. Gets thumbnail of arbitrary sizes, works on multiple platforms, and is fast.
Co-maintainer needed
Currently Android code is pretty stable, iOS has few stability issues. Co-maintainer with iOS/Swift knowlege is needed, please contact.
Contributions are welcome. Please add only features that can be supported on both Android and iOS. Please write tests for your contribution.
cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos" --save
Add cdvphotolibrary protocol to Content-Security-Policy, like this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: gap: ws: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: cdvphotolibrary:">
For remarks about angular/ionic usage, see below.
cordova.plugins.photoLibrary.getLibrary(
function (result) {
var library = result.library;
// Here we have the library as array
library.forEach(function(libraryItem) {
console.log(libraryItem.id); // ID of the photo
console.log(libraryItem.photoURL); // Cross-platform access to photo
console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail
console.log(libraryItem.fileName);
console.log(libraryItem.width);
console.log(libraryItem.height);
console.log(libraryItem.creationDate);
console.log(libraryItem.latitude);
console.log(libraryItem.longitude);
console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used
});
},
function (err) {
console.log('Error occured');
},
{ // optional options
thumbnailWidth: 512,
thumbnailHeight: 384,
quality: 0.8,
includeAlbumData: false // default
}
);
This method is fast, as thumbails will be generated on demand.
cordova.plugins.photoLibrary.getAlbums(
function (albums) {
albums.forEach(function(album) {
console.log(album.id);
console.log(album.title);
});
},
function (err) { }
);
var url = 'file:///...'; // file or remote URL. url can also be dataURL, but giving it a file path is much faster
var album = 'MyAppName';
cordova.plugins.photoLibrary.saveImage(url, album, function (libraryItem) {}, function (err) {});
// iOS quirks: video provided cannot be .webm . Use .mov or .mp4 .
cordova.plugins.photoLibrary.saveVideo(url, album, function () {}, function (err) {});
saveImage and saveVideo both need write permission to be granted by requestAuthorization.
The library handles tricky parts of aquiring permissions to photo library.
If any of methods fail because lack of permissions, error string will be returned that begins with 'Permission'. So, to process on aquiring permissions, do the following:
cordova.plugins.photoLibrary.getLibrary(
function ({library}) { },
function (err) {
if (err.startsWith('Permission')) {
// call requestAuthorization, and retry
}
// Handle error - it's not permission-related
}
);
requestAuthorization is cross-platform method, that works in following way:
cordova.plugins.photoLibrary.requestAuthorization(
function () {
// User gave us permission to his library, retry reading it!
},
function (err) {
// User denied the access
}, // if options not provided, defaults to {read: true}.
{
read: true,
write: true
}
);
Read permission is added for your app by the plugin automatically. To make writing possible, add following to your config.xml:
<platform name="android">
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</config-file>
</platform>
cordova.plugins.photoLibrary.getLibrary(
function (result) {
var library = result.library;
var isLastChunk = result.isLastChunk;
},
function (err) { },
{
itemsInChunk: 100, // Loading large library takes time, so output can be chunked so that result callback will be called on
chunkTimeSec: 0.5, // each X items, or after Y secons passes. You can start displaying photos immediately.
useOriginalFileNames: false, // default, true will be much slower on iOS
maxItems: 200, // limit the number of items to return
}
);
// Use this method to get url. It's better to use it and not directly access cdvphotolibrary://, as it will also work on browser.
cordova.plugins.photoLibrary.getThumbnailURL(
libraryItem, // or libraryItem.id
function (thumbnailURL) {
image.src = thumbnailURL;
},
function (err) {
console.log('Error occured');
},
{ // optional options
thumbnailWidth: 512,
thumbnailHeight: 384,
quality: 0.8
});
cordova.plugins.photoLibrary.getPhotoURL(
libraryItem, // or libraryItem.id
function (photoURL) {
image.src = photoURL;
},
function (err) {
console.log('Error occured');
});
// This method is slower as it does base64
cordova.plugins.photoLibrary.getThumbnail(
libraryItem, // or libraryItem.id
function (thumbnailBlob) {
},
function (err) {
console.log('Error occured');
},
{ // optional options
thumbnailWidth: 512,
thumbnailHeight: 384,
quality: 0.8
});
// This method is slower as it does base64
cordova.plugins.photoLibrary.getPhoto(
libraryItem, // or libraryItem.id
function (fullPhotoBlob) {
},
function (err) {
console.log('Error occured');
});
It's best to use from ionic-native. The the docs.
As mentioned here by dnmd, cdvphotolibrary urls should bypass sanitization to work.
In angular2, do following:
Define Pipe that will tell to bypass trusted urls. cdvphotolibrary urls should be trusted:
// cdvphotolibrary.pipe.ts
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) {
return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
}
}
Register the pipe in your module:
import { CDVPhotoLibraryPipe } from './cdvphotolibrary.pipe.ts';
@NgModule({
declarations: [
CDVPhotoLibraryPipe,
// ...
],
})
Then in your component, use cdvphotolibrary urls applying the cdvphotolibrary pipe:
@Component({
selector: 'app',
template: '<img [src]="url | cdvphotolibrary">'
})
export class AppComponent {
public url: string = 'placeholder.jpg';
constructor() {
// fetch thumbnail URL's
this.url = libraryItem.thumbnailURL;
}
}
If you use angular1, you need to add cdvphotolibrary to whitelist:
var app = angular
.module('myApp', [])
.config([
'$compileProvider',
function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|cdvphotolibrary):/);
//Angular 1.2 and above has two sanitization methods, one for links (aHrefSanitizationWhitelist) and
//one for images (imgSrcSanitizationWhitelist). Versions prior to 1.2 use $compileProvider.urlSanitizationWhitelist(...)
}
]);
TypeScript definitions are provided in PhotoLibrary.d.ts
The library includes tests in tests folder. All tests are in tests.js file.
tcc.db file is located at $HOME/Library/Developer/CoreSimulator/Devices/$DEVICEID/data/Library/TCC/TCC.db
To run tests, use special photo-library-tester. It's always useful to run these tests before submitting changes, for each platform (android, ios, browser).
Parts are based on
FAQs
Plugin that just gets photos from the gallery
We found that jakedavies-cordova-plugin-photo-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.