npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@global66/imagepicker

v3.0.1

Published

A plugin for the NativeScript framework implementing multiple image picker

Downloads

9

Readme

@nativescript/imagepicker

Contents

Intro

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

Install the plugin by running the following command in the root directory of your app.

npm install @nativescript/imagepicker

Note: Version 3.0 contains breaking changes:

  • authorize() now returns a Promise<AuthorizationResult> for both android and ios.
  • In the returned result from present() each result[i].thumbnail is now an ImageSource.
  • result[i].duration is now typed correctly as a number.

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.

Android required permissions

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 required permissions

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.

Pick images

To pick images (and/or videos) with the plugin, take the steps below:

  1. Import the plugin
import * as imagePickerPlugin from "@nativescript/imagepicker";
  1. Instantiate the picker with selection mode

Instantiate the picker with selection mode by calling the create funciton of the plugin passing it an object that specifies mode(single or multiple) of media assets selection.

let imagePickerObj: ImagePicker = imagePickerPlugin.create({
    mode: "single"});
  1. Pick the images
  • Request for permission Request for permission to access photo library by calling the asynchronous authorize method.
  • Present the list of media assets If authorization request promise has resolved(e.i. the user has granted the permission), present the list of media assets to be picked from by calling the present method.
  • Process the selection The present method resolves with the selected media assets that can you to process and consume.
imagePickerObj
    .authorize()
    .then((authResult) => {
        if(authResult.authorized) {
            return imagePickerObj.present()
                .then(function(selection) {
                    selection.forEach(function(selected) {
                        this.imageSource = selected.asset;
                        this.type = selected.type;
                        this.filesize = selected.filesize;
                        //etc
                    });
                });
        } else {
            // process authorization not granted.
        }
    })    
    .catch(function (e) {
        // process error
    });

Demo

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

API

ImagePicker class

The class that provides the media selection API. It offers the following methods:

| Method | Returns | Description |:-------|:--------|:----------- | constructor(options: Options) | ImagePicker | Instanciates the ImagePicker class with the optional options parameter. See Options | authorize() | Promise<AuthorizationResult> | Requests the required permissions. Call it before calling present(). In case of a failed authorization, consider notifying the user for degraded functionality. The returned AuthorizationResult will have it's authorized property set to true if permission has been granted. | present() | Promise<ImagePickerSelection[]> | Presents the image picker UI. | create(options: Options, hostView: View) | ImagePicker | Creates an instance of the ImagePicker class. The hostView parameter can be set to the view that hosts the image picker. Intended to be used when opening the picker from a modal page.

Options

An object passed to the create method to specify the characteristics of a media selection.

| 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. | | copyToAppFolder | string | undefined | Optional: If passed, a new folder will be created in your applications folder and the asset will be copied there. | | renameFileTo | string | undefined | Optional: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended. | | 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

The type of media assets to be selected.

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

License

Apache License Version 2.0