Select multiple photos from your device’s image gallery using PhoneGap

Question

I managed to create a test application based on the complete camera.getPicture example in the PhoneGap documentation. This allows me to take a picture or get a photo from the gallery and put it in a div.

However, I want to be able to select multiple images from the gallery and place them in my own div. Can someone point me in the right direction to find out how to do this?

Thanks.

Here is the javascript I am using:

var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for PhoneGap to connect with the device document.addEventListener("deviceready",onDeviceReady,false); // PhoneGap is ready to be used! function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } // Called when a photo is successfully retrieved function onPhotoDataSuccess(imageData) { var largeImage = document.getElementById('largeImage'); largeImage.style.display = 'block'; largeImage.src = "data:image/jpeg;base64," + imageData; } function onPhotoURISuccess(imageURI) { var largeImage = document.getElementById('largeImage'); largeImage.style.display = 'block'; largeImage.src = imageURI; } // A button will call this function function capturePhoto() { //add new div var newPhoto = document.createElement("div"); newPhoto.id = "div"; newPhoto.className ="photo"; newPhoto.innerHTML = "<img id='largeImage' src='' />"; document.getElementById("photos").appendChild(newPhoto); // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 }); } // A button will call this function function getPhoto(source) { //add new div // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. function onFail(message) { alert('Failed because: ' + message); 

Answer 1

As in Phonegap 3.5, there is no support for the simultaneous selection of multiple images. You will need to write or find a plugin that will work with your own code so you can do it. Here is the problem described in the Phonegap development plan. https://issues.apache.org/jira/browse/CB-1215

I am also working on this. Here is the link to the solution for Android.

http://webcache.googleusercontent.com/search?q=cache:http://www.technotalkative.com/android-select-multiple- photos from the gallery /

Answer 2

This plugin allows you to select multiple images as well as videos. It works for both Android and iOS.

Answer 3

you need to create a div dynamically after each photo. Your success callback will be something like this:

 function onPhotoDataSuccess(imageData) { // the following is all one line. document.getElementById("photos").innerHTML+= "<div>\ <img src=\"data:image/jpeg;base64,"+imageData+"\">\ </div>"; } 

then you can create all imgs via css using something like this

 #photos > div { width: 100px; margin:10px; float:left; }