You need the following:

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

cordova plugin add cordova-plugin-file cordova plugin add cordova-plugin-camera 1 2 3 4 cordova plugin add cordova - plugin - file cordova plugin add cordova - plugin - camera

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

<ion-view view-title="Dashboard"> <ion-content class="padding"> <h2>Upload Photo</h2> <p> <div class="item "> <button class="button button-block button-balanced button-bold " ng-click="getPhoto()">Photo Library</button> <button class="button button-block button-balanced button-bold " ng-click="takePhoto()">Take Photo or Video</button> </div> <div class="item "> <img class="img-responsive" ng-src="{{ uploadedImage }}" /> </div> </p> </ion-content> </ion-view> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ion-view view-title = "Dashboard" > <ion-content class = "padding" > <h2> Upload Photo </h2> <p> <div class = "item " > <button class = "button button-block button-balanced button-bold " ng-click = "getPhoto()" > Photo Library </button> <button class = "button button-block button-balanced button-bold " ng-click = "takePhoto()" > Take Photo or Video </button> </div> <div class = "item " > <img class = "img-responsive" ng-src = "{{ uploadedImage }}" /> </div> </p> </ion-content> </ion-view>

Select From Gallery

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

$scope.getPhoto = function () { var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 1024, targetHeight: 768, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false, correctOrientation: true }; uploadPicture(options); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $ scope . getPhoto = function ( ) { var options = { quality : 50 , destinationType : Camera . DestinationType . FILE_URI , sourceType : Camera . PictureSourceType . PHOTOLIBRARY , allowEdit : true , encodingType : Camera . EncodingType . JPEG , targetWidth : 1024 , targetHeight : 768 , popoverOptions : CameraPopoverOptions , saveToPhotoAlbum : false , correctOrientation : true } ; uploadPicture ( options ) ; } ;

Take A Photo

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

$scope.takePhoto = function () { var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 1024, targetHeight: 768, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false, correctOrientation: true }; uploadPicture(options); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $ scope . takePhoto = function ( ) { var options = { quality : 50 , destinationType : Camera . DestinationType . FILE_URI , sourceType : Camera . PictureSourceType . CAMERA , allowEdit : true , encodingType : Camera . EncodingType . JPEG , targetWidth : 1024 , targetHeight : 768 , popoverOptions : CameraPopoverOptions , saveToPhotoAlbum : false , correctOrientation : true } ; uploadPicture ( options ) ; } ;

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

function uploadPicture(options) { $cordovaCamera.getPicture(options).then(function (sourcePath) { var sourceDirectory = sourcePath.substring(0, sourcePath.lastIndexOf('/') + 1); var sourceFileName = sourcePath.substring(sourcePath.lastIndexOf('/') + 1, sourcePath.length); sourceFileName = sourceFileName.split('?')[0]; $cordovaFile.copyFile(sourceDirectory, sourceFileName, cordova.file.dataDirectory, sourceFileName).then(function (success) { $scope.uploadedImage = cordova.file.dataDirectory + sourceFileName; }, function (error) { console.log(error); }); }, function (err) { console.log(err); }); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function uploadPicture ( options ) { $ cordovaCamera . getPicture ( options ) . then ( function ( sourcePath ) { var sourceDirectory = sourcePath . substring ( 0 , sourcePath . lastIndexOf ( '/' ) + 1 ) ; var sourceFileName = sourcePath . substring ( sourcePath . lastIndexOf ( '/' ) + 1 , sourcePath . length ) ; sourceFileName = sourceFileName . split ( '?' ) [ 0 ] ; $ cordovaFile . copyFile ( sourceDirectory , sourceFileName , cordova . file . dataDirectory , sourceFileName ) . then ( function ( success ) { $ scope . uploadedImage = cordova . file . dataDirectory + sourceFileName ; } , function ( error ) { console . log ( error ) ; } ) ; } , function ( err ) { console . log ( err ) ; } ) ; } ;

You might note in the uploadPicture function we have following line

sourceFileName = sourceFileName.split('?')[0]; 1 2 3 sourceFileName = sourceFileName . split ( '?' ) [ 0 ] ;

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