Offline Programmer

Upload Images to App Storage Using Ionic Framework

You need the following:

Let’s start by adding the plugins to our ionic App by running the following commands

we need a template that include a button to allow the user to select from the Gallery and button to start the camera. Once the user select or take the photo we will display it on the App. See below


Select From Gallery

Here we need to set the camera plugin sourceType to PHOTOLIBRARY as shown below

Take A Photo

For this option we need to set the camera plugin sourceType to CAMERA as below

Note that the destinationType is set to FILE_URI. We need that to upload the photo, for that we have the uploadPicture function below


You might note in the uploadPicture function we have following line

This line is important for the Select From Gallery option. in this option the selected file will have a ? in the name which will cause error (FILE_NOT_FOUND) when trying to upload it. this line to fix that error

To test this you need to run the App on a device and you will get the screen below




Get the full code from Github

Filed under: Android, AngularJS, ionic, Javascript

  1. Thank you for wonderful tutorial. But when I run this example in iOs, I am getting cordova.file.dataDirectory null. Because of that nothing happens after capturing image. Please help me. Thank you.