How to upload photos to server from camera and gallery using cordova 3.3.0

Question

I'm learning cordova version 3.3.0. I used this code to open camera and gallery in iphone, But didn't get any success.

My Code :

    <script type="text/javascript">
        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value

        // Wait for device API libraries to load
        //
        document.addEventListener("deviceready",onDeviceReady,false);

        // device APIs are available
        //
        function onDeviceReady() {
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
        }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
        // Uncomment to view the base64-encoded image data
        // console.log(imageData);

        // Get image handle
        //
        var smallImage = document.getElementById('smallImage');

        // Unhide image elements
        //
        smallImage.style.display = 'block';

        // Show the captured photo
        // The in-line CSS rules are used to resize the image
        //
        smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
        // Uncomment to view the image file URI
        // console.log(imageURI);

        // Get image handle
        //
        var largeImage = document.getElementById('largeImage');

        // Unhide image elements
        //
        largeImage.style.display = 'block';

        // Show the captured photo
        // The in-line CSS rules are used to resize the image
        //
        largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                    destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
        // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
                                    destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
        // 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);
    }

    </script>

Can anyone guide me how can I open camera and gallery using cordova, just like we open in native.

Thanks in Advance.

Answer 1

please see my code...

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

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

  function uploadFromGallery(){
                 navigator.camera.getPicture(uploadPhoto, function(message){
                 console.log("get picture failed");
                  },{ quality: 75,destinationType:         navigator.camera.DestinationType.FILE_URI,sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,allowEdit:true} );
                                   }




function uploadPhoto(imageURI) {
               global_URI=imageURI;
                var largeImage = document.getElementById('largeImage');
               // Unhide image elements
                largeImage.style.display = 'block';
                // Show the captured photo
                  largeImage.src = imageURI;
               }


 function capturePhoto() {
          largeImage.src='';
          // Take picture using device camera and retrieve image as base64-encoded string
                                             navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 75,destinationType: destinationType.FILE_URI,saveToPhotoAlbum: true, allowEdit:true});

                                   }


     function onPhotoDataSuccess(imageURI) {
                // Uncomment to view the base64-encoded image data
                // Get image handle
                global_URI=imageURI;
               var largeImage = document.getElementById('largeImage');
                 // Unhide image elements

                 largeImage.style.display = 'block';
                // Show the captured photo
                   largeImage.src = imageURI;

      }

function uploadimageonserver (){

var options = new FileUploadOptions();
   options.fileKey="image";
                                                          options.fileName=global_URI.substr(global_URI.lastIndexOf('/')+1);
  options.mimeType="image/jpeg";
                                                           var params = new Object();
                                                            options.params = params;
                                                            params.user_id =userID;
                                                            params.post_id=postId;
                                                            var ft = new FileTransfer();
                                                            ft.upload(global_URI, encodeURI(ipAddress +"/post_comment.php"), win, fail, options);
}

function win(r) {
                                                var result = JSON.parse(r.response); alert(result);

}

  function fail(error) {
                                                    var err="An error has occurred: Code ="+error.code;
}

Answer 2

Please confirm you have created project carefully.

1. included cordova.js in html page
2. added xml folder containing config.html to res folder
3. added required permissions in android project manifest file.

if everything is ok, it should work. then check for javascript error (use try and catch clock)