How to Pick Multiple Images in Ionic

In this tutorial, we’re going to create a simple image gallery app using ionic & multiple image picker.

Let’s start

Step 1: Create a new ionic project & Change your working directory

ionic <span class="hljs-built_in">start</span> imagePicker blank
<span class="hljs-built_in">cd</span> imagePicker

Step 2: Add the required platform

ionic cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>ionic cordova platform <span class="hljs-keyword">add</span><span class="bash"> ios</span>

Step 3: Add Image Picker Plugin & npm modules

ionic cordova plugin <span class="hljs-built_in">add</span> cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION=<span class="hljs-string">"App wants to access your gallery"</span>

npm install --<span class="hljs-built_in">save</span> @ionic-<span class="hljs-keyword">native</span>/<span class="hljs-built_in">image</span>-picker

Step 4: Once we have added our npm modules and dependencies, we have to import & declare our plugin into app.module.ts

<span class="hljs-keyword">import</span> { NgModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;
<span class="hljs-keyword">import</span> { BrowserModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/platform-browser'</span>;
<span class="hljs-keyword">import</span> { RouteReuseStrategy } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/router'</span>;

<span class="hljs-keyword">import</span> { IonicModule, IonicRouteStrategy } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic/angular'</span>;
<span class="hljs-keyword">import</span> { SplashScreen } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/splash-screen/ngx'</span>;
<span class="hljs-keyword">import</span> { StatusBar } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/status-bar/ngx'</span>;

<span class="hljs-keyword">import</span> { AppComponent } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.component'</span>;
<span class="hljs-keyword">import</span> { AppRoutingModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app-routing.module'</span>;

<span class="hljs-keyword">import</span> { ImagePicker } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/image-picker/ngx'</span>;

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot({ mode: <span class="hljs-string">'md'</span> }), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    ImagePicker,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppModule</span> { }</span>

Step 5:

<span class="hljs-tag"><<span class="hljs-name">ion-fab</span> <span class="hljs-attr">vertical</span>=<span class="hljs-string">"bottom"</span> <span class="hljs-attr">horizontal</span>=<span class="hljs-string">"end"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"fixed"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-fab-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"getPictures()"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"add"</span>></span><span class="hljs-tag"></<span class="hljs-name">ion-icon</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-fab-button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-fab</span>></span>

In the above code, we create a FAB button. When users click the fab button we’re calling getPictures() function.


getPictures() {
  <span class="hljs-keyword">this</span>.imagePicker.getPictures({
    <span class="hljs-attr">maximumImagesCount</span>: <span class="hljs-number">5</span>,
    <span class="hljs-attr">outputType</span>: <span class="hljs-number">1</span>
  }).then(<span class="hljs-function"><span class="hljs-params">selectedImg</span> =></span> {
    selectedImg.forEach(<span class="hljs-function"><span class="hljs-params">i</span> =></span> <span class="hljs-keyword">this</span>.images.push(<span class="hljs-string">"data:image/jpeg;base64,"</span> + i));
  })
}

This getPictures() will get only 5 images & return the output as base64 string. Now using the images array we can create a Grid view for displaying selected images

<span class="xml">  <span class="hljs-tag"><<span class="hljs-name">ion-grid</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"images.length != 0"</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">ion-col</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let image of images"</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{image}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 150px;width:150px"</span> /></span>
      <span class="hljs-tag"></<span class="hljs-name">ion-col</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-grid</span>></span></span>

Here, we’re displaying gridview if images.length != 0 & we created columns for displaying images. Since we’ve using <ion-grid> this will be responsive

Common mistakes

  • This won’t work on the browser, you must test it on simulator / real device
  • You must give a proper permission to access; (Phone Settings => Apps => your app name => Permission & Enable all required permissions)

Output

ionic multiple image picker

Reference