1

For Android in PhoneGap 2.8.0:

I need to get image from phone gallery and need to insert in app...

My code:

HEAD:

<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/cordova.js"></script>

HTML:

<button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Browse    Photos</button>

<div id="photos"></div>

SCRIPT:

function onPhotoURISuccess(imageURI) {

var img = $('<img />');
img.attr('src', imageURI);


img.appendTo('#photos');

}

But its not working....how can i do this?

error that i got in console

file:///android_asser/www/index.html: Uncaught typeerror : cannot read property 'PHOTOLIBRARY' of undefined

Uncaught typeerror : [Object Object] has no method 'split' at file:///android_asset/www/js/jquery.mobile-1.0rc1.min.js

after i removed the jquery and jquery-mobile its working... any problem with jQuery with phonegap?

Thanks in advance

2
  • What the error log says? Jun 21, 2013 at 5:56
  • Nothing happen when i click on browse photos...
    – Dhamu
    Jun 21, 2013 at 5:57

3 Answers 3

6

I have implemented this code...recently..check this

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   
var destinationType; 

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() 
{
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}


function onPhotoURISuccess(imageURI) 
{
    console.log(imageURI);
    var largeImage = document.getElementById('largeImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
}

function onPhotoDataSuccess(imageURI) 
{ 
    var imgProfile = document.getElementById('imgProfile');
    imgProfile.src = imageURI;
    if(sessionStorage.isprofileimage==1)
    {
        getLocation();
    }
    movePic(imageURI);
}

function onFail(message) 
{
    alert('Failed because: ' + message);
}

function movePic(file)
{ 
    window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError); 
} 

function resolveOnSuccess(entry)
{ 
    var d = new Date();
    var n = d.getTime();
    var newFileName = n + ".jpg";
    var myFolderApp = "MyAppFolder";
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) 
    {      
        fileSys.root.getDirectory( myFolderApp,
                {create:true, exclusive: false},
                function(directory) 
                {
                    entry.moveTo(directory, newFileName,  successMove, resOnError);
                },
        resOnError);
    },
    resOnError);
}

function successMove(entry) 
{
    sessionStorage.setItem('imagepath', entry.fullPath);
}

function resOnError(error) 
{
    alert(error.code);
}

function capturePhotoEdit() 
{
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });
}

function getPhoto(source) 
{
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}



</script>

My html

<button onclick="capturePhoto();">Capture Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Gallery!!</button>
7
  • i got error like this, file:///android_asser/www/index.html: Uncaught typeerror : cannot read property 'PHOTOLIBRARY' of undefined
    – Dhamu
    Jun 21, 2013 at 6:19
  • you will get that if you dont have the cordova file ..please check whether you have inserted the cordova-2.8.0.jar in the libs folder and cordova.js in your www folder in the assets
    – user
    Jun 21, 2013 at 6:23
  • ya now working after removed jQuery and mobile jQuery.. Is any problem using jQuery in phonegap?
    – Dhamu
    Jun 21, 2013 at 6:27
  • Do you get any error in LogCat...if yes post the logcat...and do post the code you have implemented in your question
    – user
    Jun 21, 2013 at 6:27
  • @Dhamu you need to place the jquery before the cordova.js command and there should be not be a single error in the coding parenthesis...If this answer was useful upvote and you can accept it too
    – user
    Jun 21, 2013 at 6:29
0

try this link i hope it might be help you

http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/

See the api

http://docs.phonegap.com/en/2.8.0/index.html

and you also try like

if Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY or Camera.PictureSourceType.SAVEDPHOTOALBUM, then a photo chooser dialog is shown, from which a photo from the album can be selected.

2
  • Onclick function itself not working onclick="getPhoto(pictureSource.PHOTOLIBRARY);"
    – Dhamu
    Jun 21, 2013 at 5:55
  • Its that correct i inserted js files... 1. JQuery 2. JQuery Mobile 3. cordova
    – Dhamu
    Jun 21, 2013 at 5:55
0

Hi blow is working code for Camera and gallery. I use different function for both purpose because using the device capture you can capture the multiple image .

i hope it will help you.

    <select>
    <option>--Select--</option>
    <option onclick="GetImage(1)">Camera</option>
    <option onclick="GetImage(2)">Library</option>
    <option onclick="GetImage(3)">Album</option>
    </select>


    //// fuction to select which type of upload you want to perform
    GetImage(index)
    {
        switch (index)
        {
            case 1:
                captureImage();
                break;
            case 2:
                getPhoto('pictureSource.PHOTOLIBRARY');
                break;
            case 3:
                getPhoto('pictureSource.SAVEDPHOTOALBUM');
                break;

        }

    }
    //// fuction calle from camera capture success
    function captureSuccess(mediaFiles) {
        var i, len;
        debugger;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            uploadFile(mediaFiles[i]);
        }
    }

    // Called if something bad happens.
    // 
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    //// function to camputure image from camera
    //
    function captureImage() {
        // Launch device camera application, 
        // allowing user to capture up to 2 images
        navigator.device.capture.captureImage(captureSuccess, capturetError, { limit: 1 });
    }

    //// Upload files to server
    function uploadFile(mediaFile) {
        var ft = new FileTransfer();
        path = mediaFile.fullPath;
        name = mediaFile.name;
////your s url

        var objUrl =www.xyx.com;         

        ft.upload(path,
            objUrl,
            function (result) {
                alert("Success");


            },
            function (error) {
                alert('Error uploading file ' + path + ': ' + error.code);
            },
            { fileName: name });
    }

    //// fuction to capture image from Gallery or PHOTOLIBRARY
    function getPhoto(source) {
        // Retrieve image file location from specified source
        var cameraSource;
        if (source = "pictureSource.PHOTOLIBRARY") {
            cameraSource = pictureSource.PHOTOLIBRARY;
        }
        if (source = "pictureSource.PHOTOLIBRARY") {
            cameraSource = pictureSource.SAVEDPHOTOALBUM;
        }

        navigator.camera.getPicture(CaptureImageSuccess, onFail, {

            quality: 50,
            destinationType: destinationType.FILE_URI,
            sourceType: cameraSource
        });
    }


    //// Upload files to server from Gallery
    function CaptureImageSuccess(fileURI) {
        ////your service url

        var objUrl =www.xyx.com;         

        var options = new FileUploadOptions();
            options.fileKey = "file";
            options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1)+".jpg";
            options.mimeType = "image/jpeg";
            options.params = {}; // if we need to send parameters to the server request
            var ft = new FileTransfer();
            //ft.upload(fileURI, encodeURI(), win, fail, options);

            ft.upload(fileURI,
                objUrl,
                function (result) {
                    alert("Success");

                },
                function (error) {
                    alert('Error uploading file ' + path + ': ' + error.code);
                },
                options);
    };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.