“How do I add an Image Picker to an Ionic and Cordova app?”

If you haven’t already, get Onymos Media and your Onymos credentials by clicking on the “Try Onymos” button in the top right-hand corner. Once you install and initialize Media, you can use the code below to instantly get the “Image Picker” functionality you expect—plus a bunch more functionality you probably don’t.

import { Component, NgZone } from '@angular/core';

    declare var OnymosMedia: any;
    declare var OnymosMediaConstants: any;
    
    @Component({
      selector: '<Your CSS selector>',
      templateUrl: '<Your HTML template>.page.html',
      styleUrls: ['<Your styles>.page.scss']
    })
    export class <Your Page>Page {

      constructor(
        private zone: NgZone,
      ) {}

      selectMedia(){

        let callId = '' + Date.now(); 
        // Using '' here makes Date.now() into a string. A callId is a unique string to identify each call
        // to select an image or video. You could simply use '1' instead, for example. 

        OnymosMedia.select(
          callId,
          OnymosMediaConstants.PictureSourceType.PHOTOLIBRARY, 
          OnymosMediaConstants.MediaType.ALLMEDIA,
          // Change PictureSourceType to "CAMERA" to let users capture images and videos with the device's camera. 
      
          (mediaURI) => {
            this.zone.run(() => {
               // I'm using this.zone.run() here to be explicit about where I want Angular's default Zone to
               // look for changes. You can use the mediaURI returned by this success callback to display the image 
               // as a profile pic, attach it to a chat message, etc. 
               // e.g., this.media = mediaURI
            });
          },
      
          (error) => {
            console.log(error)
          })
        }
      }

That’s all it takes!

But, uh, now what? This is where other plugins leave you in the lurch. Now you have to store the image or video file.

“Where’s the code snip for the back-end?”

We call our Features “full-stack” because they’re not just UI wrappers (that the maintainer kinda-sorta forgets about a year later…). When it comes to Media, that means server-side included. By default, it’s configured to leverage 10 GB of free storage through Onymos Hosting. That means you can potentially store thousands of media files “out of the box” without having to do any additional setup. Need more storage? Just contact customersuccess@onymos.com.

You don’t have to rely on Onymos Hosting though. Do you already have an Azure, Google Cloud, or AWS database? Media supports all three. Find out how to make the connection here (don’t worry, it’s really easy).

Upload your media

You picked the media, now you have to upload it! Let’s call a new function from OnymosMedia.select()’s success callback.

      [...]      

      selectMedia(){

        let callId = '' + Date.now(); 

        OnymosMedia.select(
          callId,
          OnymosMediaConstants.PictureSourceType.PHOTOLIBRARY, 
          OnymosMediaConstants.MediaType.ALLMEDIA,
      
          (mediaURI) => {
            this.zone.run(() => {
              // Remember, display or attach your image or video using the mediaURI. 
              this.uploadMedia(callId)
            });
          },
      
          (error) => {
            console.log(error)
          })
       }


     uploadMedia(callId){

        var tagsArray = '<Your image tags>';
        // These image tags (up to five) are how you can find your media later. In many cases, you can use
        // one tag that acts as your media's unique ID. 
        // e.g., var tagsArray = 'Onymos'

        OnymosMedia.upload(
          callId,
          tagsArray,
          (status) => {
            this.zone.run(() => {
               console.log(status);
            });
          // I used arrow functions so I can use the "this" keyword if I need to. You can
          // learn more about arrow functions and lexical scope here: 
          // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
          },
          (error) => {
              console.log(error);
          },
          {
            targetDeviceFactor: OnymosMediaConstants.TargetDeviceFactor.MOBILE,
            thumbnailResizeFactor: 10,
          });
          // Most of Media's functions have options too. Here, I resized the media to 80% of its original size, 
          // optimized for mobile, and generated a thumbnail (which is particularly useful for displaying media 
          // as attachments). 
        }

        [...]

Search for media

Finally, you can find media files you’ve already uploaded with the OnymosMedia.search() function.

      [...]
      
      searchMedia () {
        var tagsArray = '<The tag or tags you want to search for>'
        OnymosMedia.search(
            tagsArray,
             (resultsArray) => {
                this.zone.run(() => {
                  // The resultsArray is an array of media objects that contain properties like "mediaURL" and
                  // "thumbnailURL" that you can use to display the media in your app. 
                  // e.g., this.myImage = resultsArray[0].mediaUrl
                });
            },
            (error) => {
              console.log(error);
            });
       } 
       
       [...]

Now, you have “full-stack” functionality. You can select media, upload it, and find it again when you need to display it. Eat your heart out, image picker and camera plugins. Find out everything Media’s capable of by taking a closer look at our API documentation.