You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Imagepicker plugin supporting both single and multiple selection.
31
-
32
-
- Plugin supports **iOS8+** and uses [QBImagePicker](https://github.com/questbeat/QBImagePicker) cocoapod.
33
-
- For **Android** it uses [Intents](https://developer.android.com/reference/android/content/Intent) 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.
34
-
35
-
## Installation
36
-
37
-
Install the plugin by running the following command in the root directory of your app.
38
-
39
-
```cli
40
-
npm install @nativescript/imagepicker
41
-
```
42
-
43
-
**Note: Version 3.1 contains breaking changes:**
44
-
45
-
- New behavior on iOS when the user selects `Limit AccessLim..` detailed in [iOS Limited permission](#ios-limited-permission).
46
-
47
-
**Note: Version 3.0 contains breaking changes:**
48
-
49
-
- authorize() now returns a `Promise<AuthorizationResult>` for both android and ios.
50
-
- In the returned result from `present()` each `result[i].thumbnail` is now an `ImageSource`.
51
-
-`result[i].duration` is now typed correctly as a `number`.
52
-
53
-
**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.**
54
-
55
-
## Android required permissions
56
-
57
-
Add the following permissions to the `App_Resources/Android/src/main/AndroidManifest.xml` file:
See the complete example [here](https://github.com/NativeScript/plugins/blob/main/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml#L14).
80
-
81
-
### Android Photo picker
82
-
83
-
For phones running android 13+ specifying the option `android.use_photo_picker = true` when creating the `ImagePicker` will result in the use of the System Photo Picker.
84
-
85
-
<!-- tabs: TS -->
86
-
87
-
```ts
88
-
let imagePickerObj:ImagePicker=imagePickerPlugin.create({
89
-
mode: 'single',
90
-
android: { use_photo_picker: true },
91
-
})
92
-
```
93
-
94
-
This means you can remove the `READ_MEDIA_IMAGES, READ_MEDIA_VIDEO` permissions and do not have to prompt the user for permission.
95
-
96
-
Full details [here](https://developer.android.com/training/data-storage/shared/photopicker).
97
-
98
-
You can also now limit the number of images that are selectable in the Photo Picker by specifying the `maximumNumberOfSelection` option.
99
-
100
-
For phones running < Android 13, this `use_photo_picker` option has no effect.
101
-
102
-
### iOS required permissions
103
-
104
-
Using the plugin on iOS requires the `NSPhotoLibraryUsageDescription` permission. Modify the `app/App_Resources/iOS/Info.plist` file to add it as follows:
105
-
106
-
```xml
107
-
<key>NSPhotoLibraryUsageDescription</key>
108
-
<string>Description text goes here</string>
109
-
```
110
-
111
-
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.
112
-
113
-
### iOS Limited permission
114
-
115
-
Apple introduced the `PHAuthorizationStatusLimited` permission status with iOS 14, this is where the user specifies that the app can only access specified photos by choosing the `Limit Access..` option in the authorization dialog.
116
-
117
-
In this case `authorise()` will return an `AuthorizationResult` where `authorized` will be `true` and the `details` will contain `'limited'`.
118
-
119
-
Every time the app is launched anew, and the authorize method is called, if the current permission is `limited` the user will be prompted to update the image selection.
120
-
121
-
To prevent this prompt, add the following values to your `App_Resources/iOS/Info.plist`:
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.
143
-
144
-
<!-- tabs: TS -->
145
-
146
-
```ts
147
-
let imagePickerObj:ImagePicker=imagePickerPlugin.create({
148
-
mode: 'single',
149
-
})
150
-
```
151
-
152
-
3. Pick the images
153
-
154
-
- Request for permission
155
-
Request for permission to access photo library by calling the asynchronous `authorize` method.
156
-
- Present the list of media assets
157
-
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.
158
-
- Process the selection
159
-
The `present` method resolves with the selected media assets that can you to process and consume.
|`constructor(options: Options)`|`ImagePicker`| Instanciates the ImagePicker class with the optional `options` parameter. See [Options](#options)|
203
-
|`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. |
204
-
|`present()`|`Promise<ImagePickerSelection[]>`| Presents the image picker UI. |
205
-
|`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. |
206
-
207
-
### Options
208
-
209
-
An object passed to the `create` method to specify the characteristics of a media selection.
|`mode`|`string`|`multiple`| The mode of the imagepicker. Possible values are `single` for single selection and `multiple` for multiple selection. |
214
-
|`minimumNumberOfSelection`|`number`|`0`|_Optional_: (`iOS-only`) The minumum number of selected assets. |
215
-
|`maximumNumberOfSelection`|`number`|`0`|_Optional_: (`iOS-only`, `Android-Photo Picker-Only`) The maximum number of selected assets. |
216
-
|`showsNumberOfSelectedAssets`|`boolean`|`true`|_Optional_: (`iOS-only`) Display the number of selected assets. |
217
-
|`prompt`|`string`|`undefined`|_Optional_: (`iOS-only`) Display prompt text when selecting assets. |
218
-
|`numberOfColumnsInPortrait`|`number`|`4`|_Optional_: (`iOS-only`) Sets the number of columns in Portrait orientation |
219
-
|`numberOfColumnsInLandscape`|`number`|`7`|_Optional_: (`iOS-only`) Sets the number of columns in Landscape orientation. |
220
-
|`mediaType`|[ImagePickerMediaType](#imagepickermediatype)|`Any`|_Optional_: The type of media asset to pick whether to pick Image/Video/Any type of assets. |
221
-
|`copyToAppFolder`|`string`|`undefined`|_Optional_: If passed, a new folder will be created in your applications folder and the asset will be copied there. |
222
-
|`renameFileTo`|`string`|`undefined`|_Optional_: If passed, the copied file will be named what you choose. If you select multiple, -index will be appended. |
223
-
|`showAdvanced `|`boolean`|`false`|_Optional_:(`Android-only`) Show internal and removable storage options on Android (**WARNING**: [not supported officially](https://issuetracker.google.com/issues/72053350)). |
224
-
|`android`|`{read_external_storage: string;}`|_Optional_: (`Android-only`) Provides a reason for permission request to access external storage on API level above 23. |
0 commit comments