# How to use ImagePicker to select an image from the device gallery

**URL:** <https://forum.ionicframework.com/t/how-to-use-imagepicker-to-select-an-image-from-the-device-gallery/96428>\
**Category:** Ionic Native\
**Created:** [June 30, 2017, 10:44am UTC](https://forum.ionicframework.com/t/how-to-use-imagepicker-to-select-an-image-from-the-device-gallery/96428 "2017-06-30T10:44:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Treppaoli](https://avatars.discourse-cdn.com/v4/letter/t/9de0a6/32.png) [@Treppaoli](https://forum.ionicframework.com/u/Treppaoli)\
**Post date:** [June 30, 2017, 10:44am UTC](https://forum.ionicframework.com/t/how-to-use-imagepicker-to-select-an-image-from-the-device-gallery/96428/1 "2017-06-30T10:44:41Z")

</div>

Hello i’m new to ionic 2 and i’m doing a simple app that selects the image from the device gallery and sets it as profile picture. I read a lot about but I could not find a guideline on how to do this.  
First of all I installed the following plugin

```auto
cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker.git

```

Then I read that on android I have access permissions to access the device gallery for API level \>= 23; so I added it to my **home.ts** file:

1. install this plugin for android permission -\> `cordova plugin add cordova-plugin-android-permissions`

2. include code

```auto
...
import { ImagePicker } from '@ionic-native/image-picker';
declare var cordova: any;
...
export class HomePage {
  permissions = cordova.plugins.permissions;
  
  ionViewDidLoad() {
    this.permissions.requestPermission(this.permissions.READ_EXTERNAL_STORAGE, success, error);
    function error() {
      console.warn('read external storage permission is not turned on');
    }
    function success(status) {
      if(!status.hasPermission) error();
    }
  }

  onSelectPhoto() {
    let options = {
      maximumImagesCount: 1,
      width: 100,
      heigth: 100,
      quality: 75
    }

    this.imagePicker.getPictures(options)
                    .then((results) => {
                      let base64Image = results;
                    }, (err) => { 
                      console.log('error') });
  }
}

```

1. in my **home.html**

```auto
<div class="image">
		<a href="" (tap)="onSelectPhoto()">
			<div class="add-photo">
				<ion-icon class="camera" name="camera-outline"></ion-icon>
				<span>Add your photo</span>
			</div>
		</a>
		<div>
			<ion-item>
				<ion-avatar item-start>
					<img [src]="base64Image" *ngIf="base64Image" />
				</ion-avatar>
			</ion-item>
		</div>
	</div>

```

But I can not understand if the code works and still I have a runtime error -\> `Uncaught (in promise): ReferenceError: cordova is not defined`.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [June 30, 2017, 8:35pm UTC](https://forum.ionicframework.com/t/how-to-use-imagepicker-to-select-an-image-from-the-device-gallery/96428/2 "2017-06-30T20:35:39Z")

</div>

Ionic-native has [an android-permissions plugin](https://ionicframework.com/docs/native/android-permissions/). I would use that, which means you can get rid of all the `cordova.` business. I would also suggest that you never type the word “function” inside the body of one; this will save you from many frustrating execution context bugs. Finally, if all you want is one image, I would suggest ditching the ImagePicker plugin altogether in favor of the Camera one. I found ImagePicker extremely buggy.