A plugin for the NativeScript framework implementing multiple image picker. 

A plugin for the NativeScript framework implementing multiple image picker

zbranzov

lini

tns-bot

dtodorov

tachev

tbozhikov

veselina.radeva

panayot.cankov

nativescript-imagepicker

toddanglin

    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];

Object.defineProperty(exports, "__esModule", { value: true });

var application = require("tns-core-modules/application");

var imageAssetModule = require("tns-core-modules/image-asset");

var permissions = require("nativescript-permissions");

var imagepicker_common_1 = require("./imagepicker.common");

__export(require("./imagepicker.common"));

    UriHelper._calculateFileUri = function (uri) {

        var DocumentsContract = android.provider.DocumentsContract;

        var isKitKat = android.os.Build.VERSION.SDK_INT >= 19;

        if (isKitKat && DocumentsContract.isDocumentUri(application.android.context, uri)) {

            var docId = void 0, id = void 0, type = void 0;

            if (UriHelper.isExternalStorageDocument(uri)) {

                docId = DocumentsContract.getDocumentId(uri);

                id = docId.split(":")[1];

                type = docId.split(":")[0];

                if ("primary" === type.toLowerCase()) {

                    return android.os.Environment.getExternalStorageDirectory() + "/" + id;

            else if (UriHelper.isDownloadsDocument(uri)) {

                return UriHelper.getDataColumn(uri, null, null, true);

            else if (UriHelper.isMediaDocument(uri)) {

                var split = docId.split(":");

                    contentUri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI;

                else if ("video" === type) {

                    contentUri = android.provider.MediaStore.Video.Media.EXTERNAL_CONTENT_URI;

                else if ("audio" === type) {

                    contentUri = android.provider.MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;

                var selectionArgs = [id];

                return UriHelper.getDataColumn(contentUri, selection, selectionArgs, false);

            if ("content" === uri.getScheme()) {

                return UriHelper.getDataColumn(uri, null, null, false);

            else if ("file" === uri.getScheme()) {

    UriHelper.getDataColumn = function (uri, selection, selectionArgs, isDownload) {

            var columns = ["_display_name"];

                cursor = this.getContentResolver().query(uri, columns, selection, selectionArgs, null);

                if (cursor != null && cursor.moveToFirst()) {

                    var column_index = cursor.getColumnIndexOrThrow(columns[0]);

                    filePath = cursor.getString(column_index);

                        var dl = android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS);

                        filePath = dl + "/" + filePath;

            var columns = [android.provider.MediaStore.MediaColumns.DATA];

                    filePath_1 = cursor.getString(column_index);

                        return filePath_1;

            var mediaType = this._options && 'mediaType' in this._options ? this._options.mediaType : imagepicker_common_1.ImagePickerMediaType.Image;

            var mediaType = this._options && 'mediaType' in this._options ? this._options.mediaType : imagepicker_common_1.ImagePickerMediaType.Any;

            if (mediaType === imagepicker_common_1.ImagePickerMediaType.Image) {

            else if (mediaType === imagepicker_common_1.ImagePickerMediaType.Video) {

    ImagePicker.prototype.authorize = function () {

        if (android.os.Build.VERSION.SDK_INT >= 23) {

            return permissions.requestPermission([android.Manifest.permission.READ_EXTERNAL_STORAGE]);

    ImagePicker.prototype.present = function () {

        return new Promise(function (resolve, reject) {

            var RESULT_CODE_PICKER_IMAGES = 9192;

            var application = require("application");

            application.android.on(application.AndroidApplication.activityResultEvent, onResult);

                var requestCode = args.requestCode;

                var resultCode = args.resultCode;

                if (requestCode === RESULT_CODE_PICKER_IMAGES) {

                    if (resultCode === android.app.Activity.RESULT_OK) {

                            var results = [];

                            var clip = data.getClipData();

                                var count = clip.getItemCount();

                                for (var i = 0; i < count; i++) {

                                    var clipItem = clip.getItemAt(i);

                                    if (clipItem) {

                                        var uri = clipItem.getUri();

                                        if (uri) {

                                            var selectedAsset = new imageAssetModule.ImageAsset(UriHelper._calculateFileUri(uri));

                                            results.push(selectedAsset);

                                        }

                                var uri = data.getData();

                                var selectedAsset = new imageAssetModule.ImageAsset(UriHelper._calculateFileUri(uri));

                                results.push(selectedAsset);

                            application.android.off(application.AndroidApplication.activityResultEvent, onResult);

                            resolve(results);

                        application.android.off(application.AndroidApplication.activityResultEvent, onResult);

                        reject(new Error("Image picker activity result code " + resultCode));

            var Intent = android.content.Intent;

            intent.setType(_this.mediaType);

            var length = _this.mediaType === "*/*" ? 2 : 1;

            var mimeTypes = Array.create(java.lang.String, length);

            if (_this.mediaType === "*/*") {

                mimeTypes[0] = "image/*";

                mimeTypes[1] = "video/*";

                mimeTypes[0] = _this.mediaType;

            intent.putExtra(android.content.Intent.EXTRA_MIME_TYPES, mimeTypes);

            if (_this.mode === 'multiple') {

                intent.putExtra("android.intent.extra.ALLOW_MULTIPLE", true);

            intent.putExtra(android.content.Intent.EXTRA_LOCAL_ONLY, true);

            intent.setAction("android.intent.action.OPEN_DOCUMENT");

            var chooser = Intent.createChooser(intent, "Select Picture");

            application.android.foregroundActivity.startActivityForResult(intent, RESULT_CODE_PICKER_IMAGES);

//# sourceMappingURL=imagepicker.android.js.map

    "description": "A plugin for the NativeScript framework implementing multiple image picker",

        "url": "https://github.com/NativeScript/nativescript-imagepicker"

        "ngc": "node --max-old-space-size=8192 ./node_modules/.bin/ngc",

        "prepublishOnly": "npm run build",

        "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**'",

        "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && cd ../src && npm run plugin.link",

        "test.android": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch && cd ../demo-angular && tns build android && tns test android --justlaunch",

        "test.ios": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch",

        "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\"",

        "plugin.link": "npm link && cd ../demo && npm link nativescript-imagepicker && cd ../demo-angular && npm link nativescript-imagepicker",

        "plugin.tscwatch": "npm run tsc -- -w",

        "demo.ios": "npm i && npm run tsc && cd ../demo && tns run ios",

        "demo.android": "npm i && npm run tsc && cd ../demo && tns run android",

        "demo.ng.ios": "npm i && npm run tsc && cd ../demo-angular && tns run ios",

        "demo.ng.android": "npm i && npm run tsc && cd ../demo-angular && tns run android",

        "clean": "rm -rf node_modules && cd ../demo && rm -rf hooks node_modules platforms && cd ../src && npm run plugin.link"

        "url": "https://github.com/NativeScript/nativescript-imagepicker/issues"

    "homepage": "https://github.com/NativeScript/nativescript-imagepicker",

        "tns-platform-declarations": "^5.0.0",

        "nativescript-permissions": "~1.3.0"

    "bootstrapper": "nativescript-plugin-seed"

# NativeScript Image Picker ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn4.iconfinder.com/data/icons/logos-3/228/android-32.png) 

[![npm](https://img.shields.io/npm/v/nativescript-imagepicker.svg)](https://www.npmjs.com/package/nativescript-imagepicker)

[![npm](https://img.shields.io/npm/dm/nativescript-imagepicker.svg)](https://www.npmjs.com/package/nativescript-imagepicker)

[![Build Status](https://travis-ci.org/NativeScript/nativescript-imagepicker.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-imagepicker)

Imagepicker plugin supporting both single and multiple selection.

<br />Plugin supports **iOS8+** and uses [QBImagePicker](https://github.com/questbeat/QBImagePicker) cocoa pod.

<br />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. See demo for implementation details.

- [Migrating from 5.x.x to 6.x.x](#migrating-from-5xx-to-6xx)

- [Migrating from 4.x.x to 5.x.x](#migrating-from-4xx-to-5xx)

- [Migrating from 3.x.x to 4.x.x](#migrating-from-3xx-to-4xx)

    - [Import the plugin](#import-the-plugin)

    - [Create imagepicker](#create-imagepicker)

    - [Request permissions, show the images list and process the selection](#request-permissions-show-the-images-list-and-process-the-selection)

    - [Image properties](#image-properties)

In Command prompt / Terminal navigate to your application root folder and run:

With version **6.x.x** the dependency to the `nativescript-ui-listview` plugin is removed and for iOS the [QBImagePicker](https://github.com/questbeat/QBImagePicker) cocoa pod is used. Now the plugin supports some new features, fixes some bugs and has a more native look in iOS. You should remove any dependencies to `nativescript-pro-ui`, `nativescript-ui-listview`, etc. in case you've added them in your app specifically for this plugin. Also the options **fileUri**, **doneText**, **cancelText**, **albumsText**, **newestFirst** and the methods **cancel()** and **done()** are no longer applicable. The image picker now returns the basic [{N} ImageAsset class](https://github.com/NativeScript/NativeScript/tree/master/tns-core-modules/image-asset) (and not custom asset as before). If you have been using the `fileUri` property of the returned assets to get a file path in versions prior to 6.x.x, you should refer to the following issue comment for an alternative way to get the path - https://github.com/NativeScript/nativescript-imagepicker/issues/181#issuecomment-384585293.

With version **5.x.x** major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the `nativescript-ui-listview` plugin (part of the NativeScript Pro UI components). Recently the monolithic [NativeScript Pro UI plugin was split in multiple plugins](https://www.nativescript.org/blog/professional-components-from-nativescript-ui-the-big-breakup), each of them representing a single component. Now, instead of the monolithic package, nativescript-imagepicker uses only the component it needs. To use version 5.x.x of the plugin, you need to update any dependencies to `nativescript-pro-ui` in your project with the single component alternatives as described in the [migration guide](http://docs.telerik.com/devtools/nativescript-ui/migration).

With the **4.x.x** major update to the plugin there is a related dependency which needs to be updated inside your project. The plugin uses internally the `nativescript-pro-ui` plugin (previously known as `nativescript-telerik-ui`) which has bee updated and made 100% free. This means that if your project is using the deprecated `nativescript-telerik-ui`/`pro` plugins adding the latest version of the `nativescript-imagepicker` plugin will cause your project to throw an build error when working with iOS. This is because the `nativescript-imagepicker` has a dependency to the new `nativescript-pro-ui` plugin and when your project also depends on the old `nativescript-telerik-ui` plugin there is a native frameworks collision.

In order to solve this you simply have to update to the latest `nativescript-pro-ui`, more details on how to migrate from `nativescript-telerik-ui`/`pro` to `nativescript-pro-ui` can be found [here](http://docs.telerik.com/devtools/nativescript-ui/migration).

The best way to explore the usage of the plugin is to inspect both demo apps in the plugin repository. 

In `demo` folder you can find the usage of the plugin for TypeScript non-Angular application. Refer to `demo/app/main-page.ts`.

In `demo-angular` is the usage in an Angular app. Refer to `demo-angular/app/app.component.ts`.

In addition to the plugin usage, both apps are webpack configured.

import * as imagepicker from "nativescript-imagepicker";

var imagepicker = require("nativescript-imagepicker");

Create imagepicker in `single` or `multiple` mode to specifiy if the imagepicker will be used for single or multiple selection of images

    mode: "single" // use "multiple" for multiple selection

var context = imagepicker.create({ mode: "single" }); // use "multiple" for multiple selection

### Request permissions, show the images list and process the selection

| numberOfColumnsInLandscape | iOS | 7 | Set the number of columns in Landscape orientation. |

The **hostView** parameter can be set to the view that hosts the image picker. Applicable in iOS only, intended to be used when open picker from a modal page.

* authorize() - request the required permissions.

* present() - show the albums to present the user the ability to select images. Returns an array of the selected images.

We love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-imagepicker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).

Please, use [github issues](https://github.com/NativeScript/nativescript-imagepicker/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).

![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/nativescript-imagepicker?pixel) 

		{
		"name": "nativescript-imagepicker",
		"version": "6.3.0",
		"version": "7.0.0",
		"description": "A plugin for the NativeScript framework implementing multiple image picker",
		@@ -5,0 +5,0 @@ "repository": {

		@@ -137,3 +137,3 @@ "use strict";
		get: function () {
		var mediaType = this._options && 'mediaType' in this._options ? this._options.mediaType : imagepicker_common_1.ImagePickerMediaType.Image;
		var mediaType = this._options && 'mediaType' in this._options ? this._options.mediaType : imagepicker_common_1.ImagePickerMediaType.Any;
		if (mediaType === imagepicker_common_1.ImagePickerMediaType.Image) {
		@@ -213,2 +213,12 @@ return "image/*";
		intent.setType(_this.mediaType);
		var length = _this.mediaType === "/" ? 2 : 1;
		var mimeTypes = Array.create(java.lang.String, length);
		if (_this.mediaType === "/") {
		mimeTypes[0] = "image/*";
		mimeTypes[1] = "video/*";
		}
		else {
		mimeTypes[0] = _this.mediaType;
		}
		intent.putExtra(android.content.Intent.EXTRA_MIME_TYPES, mimeTypes);
		if (_this.mode === 'multiple') {
		@@ -215,0 +225,0 @@ intent.putExtra("android.intent.extra.ALLOW_MULTIPLE", true);

		@@ -136,3 +136,3 @@ # NativeScript Image Picker ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn4.iconfinder.com/data/icons/logos-3/228/android-32.png)
		\| numberOfColumnsInLandscape \| iOS \| 7 \| Set the number of columns in Landscape orientation. \|
		\| mediaType \| both \| Any (iOS), Image (Android) \| Choose whether to pick Image/Video/Any type of assets. \|
		\| mediaType \| both \| Any \| Choose whether to pick Image/Video/Any type of assets. \|

		@@ -139,0 +139,0 @@ The hostView parameter can be set to the view that hosts the image picker. Applicable in iOS only, intended to be used when open picker from a modal page.

Improved metrics