Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript/imagepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@nativescript/imagepicker

Imagepicker plugin supporting both single and multiple selection.
Plugin supports iOS8+ and uses QBImagePicker cocoapod.
For Android it uses Intents to open the stock images or file pickers. For Android 6 (API 23) and above, the permissions to read file storage should be explicitly required.

Installation
Required Permissions
- Android
- iOS
Usage
API

Installation

npm install @nativescript/imagepicker

Required Permissions

Android

Add the following permissions to the App_Resources/Android/src/main/AndroidManifest.xml file:

targetSdkVersion < 33

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

<application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>

targetSdkVersion >=33(Android 13+)

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

<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

See the complete example here.

iOS

Using the plugin on iOS requires the NSPhotoLibraryUsageDescription permission. Modify the app/App_Resources/iOS/Info.plist file to add it as follows:

<key>NSPhotoLibraryUsageDescription</key>
<string>Description text goes here</string>

Apple App Store might reject your app if you do not describe why you need this permission. The default message Requires access to photo library. might not be enough for the App Store reviewers.

Usage

You can play with the plugin on StackBlitz at the following links:

Importing the plugin

import * as imagePickerPlugin from "@nativescript/imagepicker";

var imagePickerPlugin = require("@nativescript/imagepicker");

Creating the Imagepicker instance

Create an Imagepicker instance in single or multiple mode to specifiy if the image picker will be used for single or multiple selection.

let imagePickerObj: ImagePicker = imagePickerPlugin.create({
    mode: "single"});

var imagePickerObj = imagePickerPlugin.create({ mode: "single" });

Using the ImagePicker Instance

Once you've created the picker instance, use it to request for permissions, present the list of media assets to be picked from, and process the selection.

imagePickerObj
    .authorize()
    .then(function() {
        return imagePickerObj.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            // process the selected image
        });
        list.items = selection;
    }).catch(function (e) {
        // process error
    });

Note To request permissions for Android 6+ (API 23+), use nativescript-permissions plugin.

API

ImagePicker

Method	Returns	Description
`constructor(options: Options)`	`ImagePicker`	Instanciates the ImagePicker class with the optional `options` parameter. See Options
`authorize()`	`Promise<void>`	Requests the required permissions. Call it before calling `present()`. In case of a failed authorization, consider notifying the user for degraded functionality.
`present()`	`Promise<ImageAsset[]>`	Presents the image picker UI.

create()

imagePicker: ImagePicker = imagePickerPlugin.create(options: Options, hostView: View)

Creates an instance of the ImagePicker class.

Optional: options - The ImagePicker instance settings. See Options
Optional: (iOS-only) hostView - Can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.

Options

Option	Type	Default	Description
`mode`	`string`	`multiple`	The mode of the imagepicker. Possible values are `single` for single selection and `multiple` for multiple selection.
`minimumNumberOfSelection`	`number`	`0`	Optional: (`iOS-only`) The minumum number of selected assets.
`maximumNumberOfSelection`	`number`	`0`	Optional: (`iOS-only`) The maximum number of selected assets.
`showsNumberOfSelectedAssets`	`boolean`	`true`	Optional: (`iOS-only`) Display the number of selected assets.
`prompt`	`string`	`undefined`	Optional: (`iOS-only`) Display prompt text when selecting assets.
`numberOfColumnsInPortrait`	`number`	`4`	Optional: (`iOS-only`) Sets the number of columns in Portrait orientation
`numberOfColumnsInLandscape`	`number`	`7`	Optional: (`iOS-only`) Sets the number of columns in Landscape orientation.
`mediaType`	ImagePickerMediaType	`Any`	Optional: The type of media asset to pick whether to pick Image/Video/Any type of assets.
`showAdvanced`	`boolean`	`false`	Optional:(`Android-only`) Show internal and removable storage options on Android (WARNING: not supported officially).
`android`	`{read_external_storage: string;}`	Optional: (`Android-only`) Provides a reason for permission request to access external storage on API level above 23.

ImagePickerMediaType

Any = 0,
Image = 1,
Video = 2

License

Apache License Version 2.0