Skip to content

Commit 8292c3b

Browse files
PanayotCankovPanayotCankov
committed
Merge pull request #18 from NativeScript/release
Merge release onto master
2 parents 651d74a + 54db19e commit 8292c3b

File tree

8 files changed

+369
-52
lines changed

8 files changed

+369
-52
lines changed

‎README.md

Lines changed: 113 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,121 @@
1-
# Image Picker for the NativeScript framework
1+
# NativeScript Image Picker plugin
22
An image picker control that supports multiple selection.
33

4-
## Prerequisites
5-
- [nodejs](https://nodejs.org/)
6-
- [nativescript](https://www.nativescript.org/)
7-
- [grunt](http://gruntjs.com/getting-started)
4+
## Installation
85

9-
## Build
10-
To install dev dependencies:
6+
### Install plugin using NativeScript CLI
7+
From the command prompt go to your app's root folder and execute:
118
```
12-
npm install
9+
tns plugin add nativescript-imagepicker
1310
```
1411

15-
To compile the TypeScript and create the npm package output in `dist`:
12+
### Install plugin using AppBuilder CLI
1613
```
17-
grunt
14+
appbuilder plugin add nativescript-imagepicker
1815
```
16+
17+
### Install plugin using AppBuilder IDE
18+
In the Project Navigator, right click your project and choose Manage Packages.
19+
Choose the Plugins Marketplace tab.
20+
Search or browse for a plugin and click Install.
21+
22+
23+
## Usage
24+
25+
For sample application with single and multiple image selection ready for Android and IOS
26+
[follow this link](https://github.com/NativeScript/sample-ImageUpload)
27+
28+
### How-to Pick Multiple Images
29+
```
30+
var imagepickerModule = require("nativescript-imagepicker");
31+
32+
function selectImages() {
33+
var context = imagepicker.create({
34+
mode: "multiple"
35+
});
36+
37+
context
38+
.authorize()
39+
.then(function() {
40+
return context.present();
41+
})
42+
.then(function(selection) {
43+
console.log("Selection done:");
44+
selection.forEach(function(selected) {
45+
console.log(" - " + selected.uri);
46+
});
47+
}).catch(function (e) {
48+
console.log(e);
49+
});
50+
}
51+
```
52+
### How-to Pick Single Image
53+
```
54+
var context = imagepicker.create({
55+
mode: "single"
56+
});
57+
```
58+
### How-to Bind Selected Images
59+
#### main-page.xml
60+
```
61+
<ListView id="urls-list">
62+
<ListView.itemTemplate>
63+
<GridLayout columns="100, auto" rows="*, *, *">
64+
<Image rowSpan="3" width="100" height="100" src="{{ thumb }}" />
65+
<Label col="1" row="0" text="{{ uri }}" textWrap="true"/>
66+
<Label col="1" row="2" text="{{ fileUri }}" />
67+
</GridLayout>
68+
</ListView.itemTemplate>
69+
</ListView>
70+
71+
<Button row="1" text="Pick Multiple Images" tap="onSelectMultipleTap" />
72+
<Button row="2" text="Pick Single Image" tap="onSelectSingleTap" />
73+
```
74+
#### main-page.js
75+
```
76+
var imagepickerModule = require("nativescript-imagepicker");
77+
78+
var page;
79+
var list;
80+
81+
function pageLoaded(args) {
82+
page = args.object;
83+
list = page.getViewById("urls-list");
84+
}
85+
86+
function onSelectMultipleTap(args) {
87+
var context = imagepickerModule.create({
88+
mode: "multiple"
89+
});
90+
startSelection(context);
91+
}
92+
93+
function onSelectSingleTap(args) {
94+
var context = imagepickerModule.create({
95+
mode: "single"
96+
});
97+
startSelection(context);
98+
}
99+
100+
function startSelection(context) {
101+
context
102+
.authorize()
103+
.then(function() {
104+
list.items = [];
105+
return context.present();
106+
})
107+
.then(function(selection) {
108+
selection.forEach(function(selected) {
109+
console.log("uri: " + selected.uri);
110+
console.log("fileUri: " + selected.fileUri);
111+
});
112+
list.items = selection;
113+
}).catch(function (e) {
114+
console.log(e);
115+
});
116+
}
117+
118+
exports.pageLoaded = pageLoaded;
119+
exports.onSelectMultipleTap = onSelectMultipleTap;
120+
exports.onSelectSingleTap = onSelectSingleTap;
121+
```

‎examples/ExampleImgPick/app/App_Resources/Android/AndroidManifest.xml

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
package="__PACKAGE__"
4+
android:versionCode="1"
5+
android:versionName="1.0">
6+
7+
<supports-screens
8+
android:smallScreens="true"
9+
android:normalScreens="true"
10+
android:largeScreens="true"
11+
android:xlargeScreens="true"/>
12+
13+
<uses-sdk
14+
android:minSdkVersion="17"
15+
android:targetSdkVersion="__APILEVEL__"/>
16+
17+
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
18+
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
19+
<uses-permission android:name="android.permission.INTERNET"/>
20+
21+
<application
22+
android:name="com.tns.NativeScriptApplication"
23+
android:allowBackup="true"
24+
android:icon="@drawable/icon"
25+
android:label="@string/app_name"
26+
android:theme="@style/AppTheme" >
27+
<activity
28+
android:name="com.tns.NativeScriptActivity"
29+
android:label="@string/title_activity_kimera"
30+
android:configChanges="keyboardHidden|orientation|screenSize">
31+
32+
<intent-filter>
33+
<action android:name="android.intent.action.MAIN" />
34+
35+
<category android:name="android.intent.category.LAUNCHER" />
36+
</intent-filter>
37+
</activity>
38+
<activity android:name="com.tns.ErrorReportActivity"/>
39+
</application>
40+
</manifest>

‎examples/ExampleImgPick/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818
},
1919
"dependencies": {
20-
"nativescript-imagepicker": "file:../../dist/package",
20+
"nativescript-imagepicker": "file:..\\..\\dist\\package",
2121
"tns-core-modules": "1.5.0"
2222
}
2323
}

‎source/imagepicker.d.ts

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
declare module "imagepicker" {
1+
declare module "nativescript-imagepicker" {
22

33
import observable = require("data/observable");
44
import imagesource = require("image-source");
55

6+
export interface ImageOptions {
7+
/**
8+
* The maximum width that the image is allowed to be.
9+
*/
10+
maxWidth?: number;
11+
12+
/**
13+
* The maximum height that the image is allowed to be.
14+
*/
15+
maxHeight?: number;
16+
}
17+
18+
619
export class SelectedAsset extends observable.Observable {
720
/**
821
* A 100x100 pixels thumb of the selected image.
@@ -25,8 +38,20 @@ declare module "imagepicker" {
2538
*/
2639
fileUri: string;
2740

41+
/**
42+
* Asynchronously retrieves an ImageSource object that represents this selected image.
43+
* Scaled to the given size. (Aspect-ratio is preserved by default)
44+
*/
45+
getImage(options?: ImageOptions): Promise<imagesource.ImageSource>;
46+
47+
/**
48+
* Asynchronously retrieves an ArrayBuffer that represents the raw byte data from this selected image.
49+
*/
50+
getImageData(): Promise<ArrayBuffer>;
51+
2852
/**
2953
* For iOS Returns a promise with NSData representation of the asset.
54+
* On Android, Returns a promise with a java.io.InputStream.
3055
* Note that in future versions it should return ArrayBuffer.
3156
*/
3257
data(): Thenable<any>;
@@ -53,7 +78,7 @@ declare module "imagepicker" {
5378
/**
5479
* Set the picker mode. Supported modes: "single" or "multiple" (default).
5580
*/
56-
selectionMode?: string;
81+
mode?: string;
5782
}
5883

5984
export function create(options?: Options): ImagePicker;

‎source/images.ios.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use strict";
12
var ui_frame = require("ui/frame");
23
var page;
34
var list;

‎source/package.json

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,14 @@
66
},
77
"name": "nativescript-imagepicker",
88
"version": "0.0.4",
9-
"nativescript": {
10-
"id": "org.nativescript.imagepicker",
11-
"platforms": {
12-
"tns-android": {
13-
"version": "1.4.0"
14-
},
15-
"tns-ios": {
16-
"version": "1.4.0"
17-
}
18-
}
19-
},
9+
"nativescript": {
10+
"platforms": {
11+
"android": "1.4.0",
12+
"ios": "1.4.0"
13+
}
14+
},
2015
"dependencies": {
21-
"tns-core-modules": "1.4.0"
16+
"tns-core-modules": "^1.4.0"
2217
},
2318
"main": "viewmodel.js"
2419
}

0 commit comments

Comments
 (0)