Image Picker

@nativescript/imagepicker #

Imagepicker plugin supporting both single and multiple selection. As of 2.0, it returns rich information about your selection including filesize, path, video duration and thumbnails etc.
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.

Note: Version 2.0 contains breaking changes. In order supply more information about your selection, the ImageSource asset is nested in the response so you'll need to update your code to use result.asset instead of result as your src for your Images.

Table of Contents #

• @nativescript/imagepicker
  • Table of Contents
  • Installation
  • Required Permissions
    • Android
    • iOS
  • Usage
    • Importing the plugin
    • Creating the Imagepicker instance
    • Using the ImagePicker Instance
  • API
    • ImagePicker
    • create()
    • Response
    • Options
    • ImagePickerMediaType
  • License

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:

• NativeScript TypeScript
• NativeScript Angular
• NativeScript Vue
• NativeScript Svelte

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) {
      this.imageSource = selected.asset
      this.type = selected.type
      this.filesize = selected.filesize
      //etc
    })
    list.items = selection
  })
  .catch(function (e) {
    // process error
  })

API #

ImagePicker #

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.

Response #

As of version 2.0, imagepicker returns more information about your selection.

;[
  {
    asset: {}, // ImageSource. this is what you'll use to set the src of an Image for example.
    type: 'image', // either 'video' or 'image'
    filename: 'mycoolfile-0.jpg', // the filename
    originalFilename: 'IMG1001.JPG', // the original filename (may be useful if you changed the filename when copying)
    path: '/myapp/media/mycoolfile-0.jpg', // the path where the file is
    duration: 100, // video only, the duration in seconds.
    thumbnail: {} // ImageSource, video only. This is what you'll use to set the src of an Image for example.
  }
]

Options #

ImagePickerMediaType #

• Any = 0,
• Image = 1,
• Video = 2

License #

Apache License Version 2.0