jonz94 / capacitor-image-picker Goto Github PK

@jonz94/capacitor-image-picker

Capacitor plugin for multiple image selection.

npm install @jonz94/capacitor-image-picker
npx cap sync

This plugin uses a forked version of YPImagePicker under the hood.

In order to use this plugin, you need to manually modified ios/App/Podfile as following:

target 'App' do
  capacitor_pods
  # Add your Pods here
+  pod 'YPImagePicker', :git => 'https://github.com/jonz94/YPImagePicker.git', :tag => '5.2.2.0'
end

After modified ios/App/Podfile, make sure to run pod update command to sync up the iOS project.

iOS requires the following usage description be added and filled out for your app in Info.plist:

• NSPhotoLibraryUsageDescription (Privacy - Photo Library Usage Description)

Read about Configuring Info.plist in the iOS Guide for more information on setting iOS permissions in Xcode.

This plugin uses a forked version of TedImagePicker under the hood.

Add following line to your android/build.gradle:

allprojects {
    repositories {
        google()
        mavenCentral()
+        maven { url "https://jitpack.io" }
    }
}

Add following lines to your android/app/build.gradle:

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    defaultConfig {
        // ...
    }
    buildTypes {
        // ...
    }
+    dataBinding {
+        enabled true
+    }
}

After modified android/build.gradle and android/app/build.gradle, make sure to run Sync Project with Gradle Files in Android Studio.

This plugin requires the following permissions be added to your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

The storage permissions are for reading photo files.

Read about Setting Permissions in the Android Guide for more information on setting Android permissions.

No configuration required for this plugin.

import { ImagePicker } from '@jonz94/capacitor-image-picker';

const pickSingleImage = async () => {
  const { images } = await ImagePicker.present();

  // console.log(images[0]);

  return images[0];
}

const pickMultipleImages = async () => {
  const { images } = await ImagePicker.present({ limit: 10 });

  // console.log(images);

  return images;
}

const pickMultipleImagesWithCustomText = async () => {
  const { images } = await ImagePicker.present({
    limit: 10,
    surpassLimitMessage: 'You cannot select more than %d images.',
    titleText: 'Pick a image',
    albumsTitleText: 'Chose an album',
    libraryTitleText: 'Click here to change library',
    cancelText: 'Go Back',
    doneText: 'OK',
  });

  // console.log(images);

  return images;
}

• present(...)
• Interfaces

present(options?: PresentOptions | undefined) => Promise<Images>

Returns: Promise<Images>

See CHANGELOG.md.

See LICENSE.

• EinfachHans's Advanced ImagePicker Cordova Plugin inspires this Capacitor plugin.
• YPImagePicker provides iOS implementation.
• TedImagePicker provides Android implementation.
• Official Capacitor Camera Plugin provides saveTemporaryImage() implementation on iOS.
• Capawesome's Capacitor File Picker Plugin provides getMimeTypeFromURL() implementation on iOS.