Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Phonegap / Cordova selecting multiple photos

    • 0
    • 1
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 2.48k
    Comment on it

    Cordova camera plugin allow user to select one picture at a time. However, we can show all pictures selected by gallery or captured by camera one by one by following code:


    view file:

    <div ng-controller=MultipleSelEx>
        <div class="list card">
              <div class="item item-divider" ng-click="oneImage()">Select one picture</div>
               <div class="item item-body">
                        <div ng-repeat="item in image">
                              <img ng-src="{{item}}" id="myImage" width="50" height="50" />
                   </div>
              </div>
        </div>
        <div class="list card">
              <div class="item item-divider" ng-click="mulImage()">select multiple pictures</div>
              <div class="item item-body>
                <div ng-repeat="item in images">
                          <img ng-src="{{item}}" id="myImage" width="50" height="50" />
                   </div>
              </div>
        </div>
    </div>
    


    JS file:

    angular.module(myApp', ['ngCordova'])
    .controller('MultipleSelEx', function($scope, $rootScope, $cordovaCamera ) {
        $scope.image = [];
        $scope.oneImage = function() { 
            var options = { 
                quality: 50, 
                destinationType: Camera.DestinationType.FILE&#95;URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                targetWidth: 200, 
                 targetHeight: 200 
            };
             $cordovaCamera.getPicture(options).then(function(imageUri) {
                $scope.image.push(imageUri); 
             }, function(err) {
                 // alert(err); 
             });
         }
    })
    

    Although, we have option to select multiple pictures at one time from Gallery, for that we need to first install plugin cordova-imagePicker by following cli command:


    cordova plugin add https://github.com/wymsee/cordova-imagePicker.git

    and now add below code in controller:

    $scope.mulImage = function() {
        $scope.images = [];
        window.imagePicker.getPictures(
          function(results) {
            for (var i = 0; i < results.length; i++) {
              $scope.images.push(results[i]);
            }
            if(!$scope.$$phase) {
              $scope.$apply();
            }
          }, function (error) {
            console.log(error);
          }
        );
      };
    

    I hope, it will help you..

 1 Comment(s)

  • Dear.. This article for cordova ImagePicker is everywhere on internet.. but what it does.. it is not showing Photo Library.. like camera roll.. OR other photo albums.. it shows picture grid view from temporary directory.. OR kinda cache.. any help on this??

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: