nativescript / nativescript-imagepicker

Imagepicker plugin supporting both single and multiple selection.

NativeScript 7 or higher

• Use @nativescript/imagepicker: ~1.0.0
• Source managed here

If using 6 and below, see the following:

NativeScript Image Picker

Imagepicker plugin supporting both single and multiple selection.
Plugin supports iOS8+ and uses QBImagePicker cocoa pod.
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.

• Installation
• Configuration
• Migrating from 5.x.x to 6.x.x
• Migrating from 4.x.x to 5.x.x
• Migrating from 3.x.x to 4.x.x
• Usage
  • Import the plugin
  • Create imagepicker
  • Request permissions, show the images list and process the selection
• API
  • Methods
• Contribute
• Get Help

Installation

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

tns plugin add nativescript-imagepicker
tns run

Configuration

No additional configuration required!

Migrating from 5.x.x to 6.x.x

With version 6.x.x the dependency to the nativescript-ui-listview plugin is removed and for iOS the 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 (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 - #181 (comment).

Migrating from 4.x.x to 5.x.x

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, 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.

Migrating from 3.x.x to 4.x.x

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.

Usage

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.

In short here are the steps:

Import the plugin

TypeScript

import * as imagepicker from "nativescript-imagepicker";

Javascript

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

Create imagepicker

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

TypeScript

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

Javascript

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

Request permissions, show the images list and process the selection

context
    .authorize()
    .then(function() {
        return context.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+) we use nativescript-permissions.

NOTE: To be sure to have permissions add the following lines in AndroidManifest.xml

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

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

NOTE: Using the plugin on iOS requres photo library permission. Your app might be rejected from the Apple App Store if you do not provide a description about why you need this permission. The default message "Requires access to photo library." might not be enough for the App Store reviewers. You can customize it by editing the app/App_Resources/iOS/Info.plist file in your app and adding the following key:

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

API

Methods

• create(options) - creates instance of the imagepicker. Possible options are:

Option	Platform	Default	Description
mode	both	multiple	The mode if the imagepicker. Possible values are single for single selection and multiple for multiple selection.
minimumNumberOfSelection	iOS	0	The minumum number of selected assets.
maximumNumberOfSelection	iOS	0	The maximum number of selected assets.
showsNumberOfSelectedAssets	iOS	True	Display the number of selected assets.
prompt	iOS	undefined	Display prompt text when selecting assets.
numberOfColumnsInPortrait	iOS	4	Set the number of columns in Portrait orientation.
numberOfColumnsInLandscape	iOS	7	Set the number of columns in Landscape orientation.
mediaType	both	Any	Choose whether to pick Image/Video/Any type of assets.
showAdvanced	Android	false	Show internal and removable storage options on Android (WARNING: not supported officially).

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.

Contribute

We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

Get Help

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

nativescript-imagepicker's Issues

not working with image-source module

I get the path to the selected image as in the examples. However I am trying to use this image in my app by using the image-source module.

eg

let img = imageSource.fromFile(selected.fileUri);
console.log("img", JSON.stringify(img));
this.page.backgroundImage = img;

The console log output when running in emulator however is null. Does it work with the image-source module? If so what am I doing wrong?

Couldn't find a way to get the actual image with this plugin

Couldn't find a way to get the actual image with this plugin

When I try to access the fileUri the system throws the following error:
'android.permission.READ_EXTERNAL_STORAGE,'

Also, the data() method is not implemented. What is the best way to get the actual image using this plugin? Can you help me?

Invalid URI

I am getting the below issue when I try to access fileUri

JS: - content://media/external/images/media/21121
JS: Error: java.lang.IllegalArgumentException: Invalid URI: content://media/external/images/media/21121

context
.authorize()
.then(function() {
return context.present();
})
.then(function(selection) {
console.log("Selection done:");
selection.forEach(function(selected) {
console.log(" - " + selected.fileUri);
registerData.mpPhoto = selected.fileUri;
});
}).catch(function (e) {
console.log(e);
});

version of imagepicker - "nativescript-imagepicker": "0.0.4",

Possibility to set default viewing folder?

Is it possible to set default folder when selecting a picture, so user wont have to go thru all folders?

Question: SelectedAsset.thumb property.

Find there is SelectedAsset.thumb property but couldn't get it work. Not sure if I missed anything. Could you kindly to provide sample of using SelectedAsset.thumb.

Regards

Plugin not compatible with new version of tns.

Plugin does not work with version 2.1 of tns-core .
When will be updated the plugin?

View model data is lost upon return to view.

If you have data on a page, for example in a list view that is tied to an observable array within a view model, or if you have a variable saved within the context of a view, it is removed once the image picker is finished and returns to the primary view. Is there a way to save this data without having to cache it externally and reload it after an image is picked, like the clearHistory value in the NS navigation function?

Conflict with nativescript-facebook-login

I have nativescript-imagepicker installed, version 2.4.1, and nativescript-facebook-login, version 0.2.0. At first I login with Facebook, then I take the picture. Block of code doesn’t work:

.then(function(selection) {
    console.log("Selection done:");
    selection.forEach(function(selected) {
        console.log(" - " + selected.uri);
    });
}).catch(function (e) {
    console.log(e);
});

I reviewed source code and found out that the handler onResult(args) for event:
application.android.on(application.AndroidApplication.activityResultEvent, onResult);
doesn’t work. That doesn't start.

Error: java.lang.IllegalArgumentException: Not a document

I get this error when run sample-imageUpload in debug mode on either emulator (genymotion Samsung Galaxy S6 Android 5.1.0) or device (Samsung Galaxy S3 Android 4.4.2):
Error: java.lang.IllegalArgumentException: Not a document: content://media/external/images/media/3760
I'm trying to pick an image from Gallery.

My config:
nativescript-imagepicker: 0.0.6
tns-ios: 2.3.0
tns-android: 2.3.0
tns-core-modules: 2.2.0

Property scrollDirection already registered for type ListViewLayoutBase.

in my project has the lasted nativescript-ui-pro when use

import * as imagepickerModule from 'nativescript-imagepicker';
or
let imagepicker = require('nativescript-imagepicker');

ios has appear error

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:2837:32: EXCEPTION: Uncaught (in promise): Error: Property scrollDirection already registered for type ListViewLayoutBase. CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:2842:36: ORIGINAL STACKTRACE:

package.json :
tns-core-modules:2.4.2

Invalid URI

I am trying to console.log(selected.fileUri) as in the example, however this results in an Invalid URI error in the console. I am running on Android. Below is the code I am using.

The full error: Error: java.lang.IllegalArgumentException: Invalid URI: context://media/external/images/media/1072602

exports.pickImages = function(){
    var context = imagepicker.create({
        mode: "single"
    });

    context
        .authorize()
        .then(function() {
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                console.log(selected.fileUri);
            });
        }).catch(function (e) {
            console.log(e);
        });
}

Nativescript-Angular cant set selected image to local variant

Hi,

I'm trying to use this plugin with nativescript-angular. With the code below i can select image file but i need the add this imagesource to array so that user can upload them later.But i cant add the imagesource to anything outside the event.
My code is

        var context = imagepickerModule.create({
                mode: "single"
            });
            context
                .authorize()
                .then(function() {
                    return context.present();
                })
                .then(function(selection) {
                    var _item:image_item=new image_item();
                    selection.forEach(function(selected) {
                        console.log("uri: " + selected.uri);         
                        _item.uri=selected.uri;
                        var REQUIRED_SIZE = {
                        maxWidth: 800,
                        maxHeight: 800
                        };

                    var imgSource = selected.decodeUri(selected._uri, REQUIRED_SIZE);
                        _item.thumb = imgSource;

                    });
                    console.log("uri: " + _item.uri); 
                   this.pic_list.push(_item);-->>this line get error ("TypeError: Cannot read property 'pic_list' of null ")
                }).catch(function (e) {
                    console.log(e);
                });

And also is there any way to use this plugin to select files other than the image (video,xml,doc etc).
Thanks.

Selected image getImage() method returns null

I am trying to turn the selected image to a base64 string, but I only get null back.
My code is as follows:

        let context = imagepicker.create({
            mode: "single"
        });
        context
            .authorize()
            .then(() => {
                return context.present();
            })
            .then((selection) => {
                console.log("Selection done");
                selection.forEach((selected) => {
                    selected.getImage().then(
                        (image) => {
                            let imgbase64 = image.toBase64String("JPG");
                            console.log(imgbase64);
                        }
                    );
                });
            }).catch(function (e) {
                console.log(e);
            });

Only tested on iOS 10 (emulator).

Crashing on iOS when album in camera roll has alot of images

This plugin crashes on iOS when you go to the camera roll and choose the album All Photos if there is a large amount of photos (Mine has 3640 photos, so assume this would also crash if another album had a lot of photos). The exact behavior is it freezes when first selecting the album, then eventually loads it and then exits from the app. Nothing is shown in the logs. However it works when I choose Recently Added that only has 8, it works as expected.

Package.json has "nativescript-imagepicker": "^2.3.1",

My code is as follows:

 var context = imagepicker.create({
            mode: "single"
        });
        context.authorize()
            .then(() => {
                return context.present();
            })
            .then((selection) => {
                selection.forEach((selected) => {
                     console.log("selected", selected);
                        }).catch((err) => {
                            console.log("Error", err);
                        });
                    }
                });
            }).catch((e) => {
                console.log(e);
            });

Not able to start with webpack with release 2.4.1 (iOS / emulator)

Hi, I think there was a problem on the packaging that is preventing the plugin to start with webpack.

• tns-core-modules: 2.4.0
• tns-ios: 2.4.0

Specifically the problem is this one:

...
Successfully deployed on device with identifier '51CA4570-C725-4DAB-91E1-A47CBA8A18E3'.
objc[77354]: Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x118a0b998) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x118830d38). One of the two will be used. Which one is undefined.
CONSOLE WARN file:///app/bundle.js:143025:15: Objective-C class name "UIDocumentInteractionControllerDelegateImpl" is already in use - using "UIDocumentInteractionControllerDelegateImpl1" instead.
CONSOLE WARN file:///app/bundle.js:137723:15: Objective-C class name "Responder" is already in use - using "Responder1" instead.
CONSOLE WARN file:///app/bundle.js:137730:15: Objective-C class name "Window" is already in use - using "Window1" instead.
CONSOLE WARN file:///app/bundle.js:137762:15: Objective-C class name "NotificationObserver" is already in use - using "NotificationObserver1" instead.
CONSOLE WARN file:///app/bundle.js:163369:15: Objective-C class name "UIGestureRecognizerDelegateImpl" is already in use - using "UIGestureRecognizerDelegateImpl1" instead.
CONSOLE WARN file:///app/bundle.js:163381:15: Objective-C class name "UIGestureRecognizerImpl" is already in use - using "UIGestureRecognizerImpl1" instead.
CONSOLE WARN file:///app/bundle.js:163671:15: Objective-C class name "TouchGestureRecognizer" is already in use - using "TouchGestureRecognizer1" instead.
CONSOLE WARN file:///app/bundle.js:143838:15: Objective-C class name "AnimationDelegateImpl" is already in use - using "AnimationDelegateImpl1" instead.
CONSOLE WARN file:///app/bundle.js:150033:15: Objective-C class name "TapBarItemHandlerImpl" is already in use - using "TapBarItemHandlerImpl1" instead.
CONSOLE WARN file:///app/bundle.js:153683:15: Objective-C class name "UIViewControllerImpl" is already in use - using "UIViewControllerImpl1" instead.
CONSOLE WARN file:///app/bundle.js:133386:15: Objective-C class name "TransitionDelegate" is already in use - using "TransitionDelegate1" instead.
CONSOLE WARN file:///app/bundle.js:133425:15: Objective-C class name "UINavigationControllerAnimatedDelegate" is already in use - using "UINavigationControllerAnimatedDelegate1" instead.
CONSOLE WARN file:///app/bundle.js:133460:15: Objective-C class name "UINavigationControllerImpl" is already in use - using "UINavigationControllerImpl1" instead.
CONSOLE WARN file:///app/bundle.js:164731:15: The TypeScript constructor "TKListViewDataSourceImpl" will not be executed.
CONSOLE WARN file:///app/bundle.js:164873:15: The TypeScript constructor "ExtendedListViewCell" will not be executed.
1   0x10f9f4a6b NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x11017490e ffi_closure_unix64_inner
3   0x1101752c2 ffi_closure_unix64
4   0x10db4009b _CFXRegistrationPost
5   0x10db3fe02 ___CFXNotificationPost_block_invoke
6   0x10db02ea2 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
7   0x10db01f3b _CFXNotificationPost
8   0x1104550ab -[NSNotificationCenter postNotificationName:object:userInfo:]
9   0x112050d06 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:]
10  0x112056de9 -[UIApplication _runWithMainScene:transitionContext:completion:]
11  0x112053f69 -[UIApplication workspaceDidEndTransaction:]
12  0x1146d0723 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__
13  0x1146d059c -[FBSSerialQueue _performNext]
14  0x1146d0925 -[FBSSerialQueue _performNextFromRunLoopSource]
15  0x10db47311 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
16  0x10db2c59c __CFRunLoopDoSources0
17  0x10db2ba86 __CFRunLoopRun
18  0x10db2b494 CFRunLoopRunSpecific
19  0x1120527e6 -[UIApplication _run]
Nov 20 17:56:13 MacBook-Pro-de-Ignacio com.apple.CoreSimulator.SimDevice.51CA4570-C725-4DAB-91E1-A47CBA8A18E3.launchd_sim[71408] (UIKitApplication:com.gynto.client[0x916c][77354]): Service exited due to Segmentation fault: 11
20  0x112058964 UIApplicationMain
Nov 20 17:56:13 MacBook-Pro-de-Ignacio gyntoclient[77354]: 21  0x11017511d ffi_call_unix64
Nov 20 17:56:13 MacBook-Pro-de-Ignacio gyntoclient[77354]: 22  0x136305250
Nov 20 17:56:13 MacBook-Pro-de-Ignacio gyntoclient[77354]: file:///app/bundle.js:137951:76: JS ERROR Error: A Frame must be used to navigate to a Page.
Nov 20 17:56:13 MacBook-Pro-de-Ignacio SpringBoard[71425]: [KeyboardArbiter] HW kbd: Failed to set (null) as keyboard focus

If I downgrade to 2.3.1 with the PR I submitted it does work.

Pictures selected have wrong orientation

Upon selecting an image using nativescript-imagepicker plugin. Sometimes the image orientation is incorrect event though it was correct in the picker. I suspect it has something to do with the orientation which the picture was taken in however it is pretty inconsistent. Is there a way to do it internally or do I have to use an additional tool?

Setting image object's source to getImage value is not working on iOS

I have an image tag defined in xml with the id "thumbnail." The image picker appears and I can select and image, but the image never actually shows up/changes. Uri and fileUri do return properly if I log them. I've also tried setting src instead of imageSource, as well as creating a new image tag programmatically with JS, but the results are the same. Running on iOS 10. This is the function I am using:

exports.pickImage = function(){
    var context = imagepicker.create({
        mode: "single"
    });
   
    context
        .authorize()
        .then(function() {
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                selected.getImage()
                    .then((imageSource1) => {
                        var thumbnail = page.getViewById("thumbnail");
                        thumbnail.imageSource = imageSource1;
                        
                    },
                    (error) => {
                      console.log("error");
                    })
                
            });
        }).catch(function (e) {
            console.log(e);
        });
}

Permission issue on ios

Hello. The plugin seems to work properly selecting the file however the returned image cannot be used.
The resulting error is:
fileUri: file:///var/mobile/Media/DCIM/100APPLE/IMG_0002.JPG
CONSOLE LOG file:///app/main-page.js:78:20: NSErrorWrapper: You don’t have permission to save the file “100APPLE” in the folder “DCIM”.

Problem in the package.json

Hi guys, i used the plugin for my app targeting android and ios and it works fine for android both when i was debugging and when i published, but for ios during the debug it worked but when i want to publish it didn't pass the verification process and gave the error: Invalid binary.

I had to change the package.json removing dependecy and devDependency and the problem was fixed.
I use nativescript 2.3.0, they told me that in the 2.4.0 version the problem doesn't sussit

Fix package.json to supporting AoT compilation

I try use webpack and after command npm run start-android-bundle got the error: not find module nativescript-imagepicker.

For correct compilation I replace in package.json property main
from "main": "viewmodel.js", to "main": "viewmodel",

More info: https://docs.nativescript.org/angular/tooling/bundling-with-webpack.html#recommendations-for-plugin-authors

Max Image for multiple selection feature.

Hello,

Would be great to have a max image number parameter for mode: "multiple".

Regards,

Failed to find module: "nativescript-imagepicker"

Hello, I am using the nativescript image picker with angular2 and I am having the following error using the Android emulator (iOS works well):
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Failed to find module: "nativescript-imagepicker", relative to: /app/tns_modules/ at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4556) at android.app.ActivityThread.access$1500(ActivityThread.java:151) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1364) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5254) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698) Caused by: com.tns.NativeScriptException: Failed to find module: "nativescript-imagepicker", relative to: /app/tns_modules/ at com.tns.Module.resolvePathHelper(Module.java:220)

My component is importing the image picker using:
var imagepickerModule = require("nativescript-imagepicker");

Wich could be the error?

Thanks in advance

ImagePicker works with ImageAsset instead of ImageSource

Images and thumbs will be of type ImageAsset instead of ImageSource.
Thumb property of type ImageSource is deprecated, thumbAsset should be used instead.

The repo does not compile

I just clone it to try to make some fixes and it does not compile:

viewmodel.android.ts(5,35): error TS2307: Cannot find module 'image-asset'.
viewmodel.android.ts(74,14): error TS2339: Property 'notifyPropertyChange' does not exist on type 'SelectedAsset'.
viewmodel.android.ts(196,15): error TS2339: Property 'notifyPropertyChange' does not exist on type 'SelectedAsset'.
viewmodel.android.ts(208,14): error TS2339: Property 'notifyPropertyChange' does not exist on type 'SelectedAsset'.
viewmodel.ios.ts(4,35): error TS2307: Cannot find module 'image-asset'.
viewmodel.ios.ts(193,9): error TS2346: Supplied parameters do not match any signature of call target.
viewmodel.ios.ts(235,14): error TS2339: Property 'notifyPropertyChange' does not exist on type 'Asset'.
viewmodel.ios.ts(248,14): error TS2339: Property 'notifyPropertyChange' does not exist on type 'Asset'.
viewmodel.ios.ts(466,18): error TS2339: Property 'options' does not exist on type 'AssetPH'.
viewmodel.ios.ts(472,18): error TS2339: Property 'options' does not exist on type 'AssetPH'.

The plugin does not work with webpack

It raises this error when trying to select:

Error: Failed to load Page from entry.moduleName: ./tns_modules/nativescript-imagepicker/albums

But it works correctly if not run with --bundle.
I think it is because webpack did not detect the navigations so not inspecting the other components.

Cannot find name 'Thenable'.

Hi. After updating the module tns-core-modules to 2.4.0-2016-09-21-4189 version occurs the following error in my app:

`
57 data(): Thenable;

node_modules/nativescript-imagepicker/imagepicker.d.ts(57,17): error TS2304: Cannot find name 'Thenable'.

65 authorize(): Thenable;
node_modules/nativescript-imagepicker/imagepicker.d.ts(65,22): error TS2304: Cannot find name 'Thenable'.

71 present(): Thenable<SelectedAsset[]>;

node_modules/nativescript-imagepicker/imagepicker.d.ts(71,20): error TS2304: Cannot find name 'Thenable'.`

Is SelectedAsset.fileUri still a thing?

When ever I try to access fileUri, nothing happens. It seems to be the case that any erroneous lines of javascript fail silently, so I don't have any good indication of what I'm doing wrong. I've attempted to attach a debugger, but that only results in white screen. Here's what I'm attempting:

var impagePicker = require("nativescript-imagepicker");
var context = impagePicker.create({mode: 'single'});
context.authorize()
    .then(function() {
        return context.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            console.log(selected.uri);
            console.log(selected.fileUri);
        });
    });

uri prints a content:// url, and fileUri prints nothing at all. In fact, attempting to do anything with fileUri fails.

I've attempted this on a OnePlus X (Android 5.1.1) using nativescript-image-picker 0.0.6, tns-android 2.0.0, and tns-core-modules 2.0.1. I have not tried this on any form of IOS device. I'm hoping I'm missing something obvious.

[question] Picking Video Files

Hey there,

thanks for that awesome plugin! I know it's called image picker, but is there any future support for additionally picking video files planned?

Quick question: Thumbnail Layout

Hi,

Do we have any method to override the default thumbnail layout without forking this repository? Because I'm looked at the source code file and did not found any options or method that can expose this functionality.

Cannot get FileUrl for android.os.Build.VERSION.SDK_INT >= 23

This plugin does not seem to working for android version 23.
Cannot get FileUrl

Conflicts with nativescript-telerik-ui-pro

I have nativescript-imagepicker installed, version 2.4.1, and nativescript-telerik-ui-pro version 1.4.1. When I run it on android, gradle fails with this error:

:processF0F1F2F3F4F5F6DebugResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processF0F1F2F3F4F5F6DebugResources'.
> Error: more than one library with package name 'com.telerik.android.common'

It was working with 2.3.1 version of imagepicker.

I have nativescript 2.4 installed

Somebody else had similar problem I think: NativeScript/nativescript-cli#2258

How to load the actual image with URI?

How can I actually use this URI with image.imageSource ??

URI what I get look like: "content://com.android.providers.media.documents/document/image%3A34" and so on.

It shows images from the library but gets an error when try to use them (iOS / not local images)

Steps to reproduce:

• User for example the https://github.com/NativeScript/sample-ImageUpload
• You will see that you see images that are not actually in your device but from your cloud account

When you try to use them (for example upload them) there is no fileUri then not usable.

Here is the log for example of one of them:

CONSOLE LOG file:///app/main-page.js:90:24: Total bytes to transfer: 0
CONSOLE LOG file:///app/main-page.js:83:20: ----------------
CONSOLE LOG file:///app/main-page.js:84:20: Status: complete
CONSOLE LOG file:///app/main-page.js:85:20: Error: undefined
CONSOLE LOG file:///app/tns_modules/nativescript-imagepicker/images.js:18:20: 736
CONSOLE LOG file:///app/tns_modules/nativescript-imagepicker/images.js:19:20: 736
CONSOLE LOG file:///app/tns_modules/nativescript-imagepicker/images.js:18:20: 736
CONSOLE
LOG file:///app/tns_modules/nativescript-imagepicker/images.js:19:20: 736

Undefined fileUri

Hello.
I just want to thank you for a great example you gave us and it helped me a lot on the project im currently busy with.

However, i seem to have an undefined fileUri when i have selected an image, but i do get the Uri part.

Regards.

Refactor minor loop

I've copied this from somewhere but it looks lame:
https://github.com/NativeScript/nativescript-imagepicker/blob/release/source/viewmodel.android.ts#L100
Use Math.log2-ish approach instead the funky loop.

Error new update the nativescript

Error new update the nativescript

The plugin is not working for IOS

The plugin (and the example) work fine for android, but doesn`t show the photos in IOS.

It shows videos on the selection of images (iOS)

Obviously gets an error when someone picks them.

The problem is that you might not even distinguish they are images.

To reproduce it, just start this sample app on you iphone with videos: https://github.com/NativeScript/sample-ImageUpload

Possible to have cropped image.

Is it possible to return cropped image? For example, if I have image 640x480, I wanted to return center (or specified area) of ie 300x300.

Note: When I specify only maxWidth as option, the gallery hang.

App crashes as Selected fileUri becomes undefined in the device running ios 9.3

But Shows valid fielUri in the simulator.

nativescript-imagepicker is not supported for android

I received this message from the CLI upon installation of the plugin. I tried to use it in an app, and also tried using a demo project but this didn't work either. Any ideas why this is happening? This is the only plugin I've had an issue with.

Missing License File...

What license is this under?

Single tap does not work on Android

Hi, I noticed that multi selection is working fine, but if you select just one it doesn`t work okay. If you debug the selection is empty.

Generate JS or Update NPM

Hi,
I have my App using just JS, and I am having lots of trouble compiling the TS file, can someone release a the most recent version to NPM or regenerate the JS files?

Full Image Loading

It would be beneficial for consumers of this API if we could retrieve full images using the image picker in the form of an ImageSource. This way we are not limited to 100x100 pixel thumbs.

Additionally, it would be nice if the API exposed a way to use promises for retrieving either thumbs or full images. As it stands right now, the iOS API appears synchronous, but is actually asynchronous, while the Android API is fully synchronous.

I can implement all of this and submit a pull.

Having some issues using getImage()

Hello, I've been looking at trying to use this image selector for single image selections on Android, and I was having some troubles with getting an ImageSource object out of this plugin.

Using the following imports,

var imageSource = require('image-source');
var imagePickerModule = require("nativescript-imagepicker");

I have the following code which does not work. I can successfully select an image, but I can't seem to get the ImageSource object out of the function call. I have included some very basic alert calls with catch() statements to try to figure out what was going wrong. The first alert was to see what the result of context.present() was, and the JSON stringified result was

[{"_observers":{}, "disableNotifications":{},"_uri":{},"_thumbRequested":false}]

Next, I attempted to get the ImageSource from the first picture in the array using getImage(). However, the neither the then() function nor the catch() function (Error A) ran after getImage(). I did, however, get Error B to show up, although it did not have any error message associated with it.

context.authorize().then(function () {
            return context.present();
         })
         .then(function (pickedPictures) {
            var size = {
               maxWidth: 100,
               maxHeight: 100
            };
            alert("Stringified pictures: " + JSON.stringify(pickedPictures));
           //displays [{"_observers":{}, "disableNotifications":{},"_uri":{},"_thumbRequested":false}]

            return pickedPictures[0].getImage(size)
               .then(function (pickedPicture) {
                  alert('Success - '  + JSON.stringify(pickedPicture));
                  return self.set('picture', pickedPicture);
               })
               .catch(function (error) {
                  alert('Error A: ' + JSON.stringify(error));
                  //This catch function does not appear.
               });
         }).catch(function (error) {
            alert('Error B: ' + JSON.stringify(error));
           //This catch function does appear, showing:
          //Error B: {}
         });;

Is there something I am doing wrong with my implementation of this module?

@KallynGowdy as far as I can tell, it seems like the getImage() function is null in the pickedPictures[0] object. For example, if I replaced getImage() with something nonsensical like getRabbits(), I get the same scenario, where Error A doesn't appear but Error B appears.

Guard for "undefined" event name in Observable's on and off

The:

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

Throws:

TypeError: Cannot read property 'split' of undefined'.

ImagePicker crashing when selecting photos downloaded with 'data:image'

Using browser to download and save images to /Downloads in local storage sometimes images are refered not with https://path-to-image but with data:image/jpeg;base34/path-to-image .. in this case the imagepicker is not able to select the image later.
Issue discovered with Android emulator under {N} 1.7.0.

Launch timeout has expired, giving up wake lock!

When I click on an image in imagepicker it never gets back to the app. I get black screen on the emulator and nothing happens no matter how long I wait. The adb logcat shows this: "Launch timeout has expired, giving up wake lock!". Any advise please why it happens?

My config:
nativescript-imagepicker: 0.0.6
tns-ios: 2.3.0
tns-android: 2.3.0
tns-core-modules: 2.3.0

Plugin is not working in IOS simulator or in device

I have recently used this plugin. Its crashes in IOS emulator and device. following is the package configuration. I have used the plugin as in the example.

{
"description": "Test Application",
"license": "SEE LICENSE IN ",
"readme": "BSL Application",
"repository": "",
"nativescript": {
"id": "org.nativescript.test",
"tns-ios": {
"version": "2.2.1"
}
},
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/platform-server": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"nativescript-angular": "^0.3.0",
"nativescript-bluetooth": "^1.1.2",
"nativescript-i18n": "0.0.6",
"nativescript-imagepicker": "0.0.6",
"reflect-metadata": "^0.1.5",
"rxjs": "5.0.0-beta.6",
"tns-core-modules": "2.2.1",
"zone.js": "^0.6.12"
},
"devDependencies": {
"nativescript-dev-typescript": "^0.3.2",
"typescript": "^1.8.10"
}
}

following is the error on simulator,

com.apple.CoreSimulator.SimDevice.DCF7E52F-0A11-40ED-9090-9AE95E5A6925.launchd_s
im6072: Service exited due to signal: Segmentation faul