Cant get PhoneGap to access IOS camera. Button issues

Question

I cannot get my button to click and access my camera and other functionality.

My HTML portion of the code. I do have all of the necessary plugins installed. And I am able to view the buttons I created. But nothing happens when they are clicked.

<div class="row">
   <div class="col-sm-2"> </div>
    <div id="imgDiv" class="col-sm-5 col-xs-11 thumbnail">
      <img src="#" alt="Image" id="img" />
      <div class="text-center">
      <button type="button" class="btn btn-primary" id="btPhotoLib">Photo</button>
      <button type="button" class="btn btn-primary active" id="btCamera">Camera</button>
      <button type="button" class="btn btn-primary" id="btUpload">Upload</button>   
      </div>                        
    </div>              
</div>

My JS file:

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        options = {quality:50, destinationType: Camera.Destination.FILE_URI,     sourceType: pictureSource.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail,[options]);     
        }); 

    $('#btPhotoLib').on('click', function(e){
    options = {quality:50, destinationType: Camera.Destination.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY};
    navigator.camera.getPicture(photoSuccess, photoFail,[options]);
});

$('#btUpload').on('click', function(e){
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    var ft = new FileTransfer();
    var server = encodeURI(serverURL);
    ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
});
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css("width": "100%", "height": "100%");
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
navigator.camera.cleanup();
navigator.notification.alert("Number of bytes is : " + results.bytesSent);
navigator.notification.alert("Http Response is : " +results.response );


function uploadFail(){
    alert("Am error has occured: Code = " + error.code);
}

frobinsonj · Accepted Answer · 2017-10-04T10:47:32.990

I have gone through your code and have got it working. It has been tested on Android and iOS however I was unable to test the upload.

I have corrected some syntax errors in your javascript (there were a few missing curly brackets as well as some other minor things).
When using JQuery to add multiple css tags you must give it an object, looks like you just missed the curly brackets.
Added in photoFail function as it was used but not defined.
Added error parameter to your error functions.
Camera.getPicture options parameter expects an object but it was given an array.
Camera.Destination is not defined, should be Camera.DestinationType.
pictureSource is not defined, should be Camera.PictureSourceType.

I got most of this from checking the cordova-plugin-camera documentation. I would recommend having a read through.

Here is the working code. You can view all the changes here.

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail, options);     
    }); 

    $('#btPhotoLib').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY};
        navigator.camera.getPicture(photoSuccess, photoFail, options);
    });

    $('#btUpload').on('click', function(e){
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        var ft = new FileTransfer();
        var server = encodeURI(serverURL);
        ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
    });
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css({"width": "100%", "height": "100%"});
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
    navigator.camera.cleanup();
    navigator.notification.alert("Number of bytes is : " + result.bytesSent);
    navigator.notification.alert("Http Response is : " +result.response );
}

function uploadFail(error){
    alert("Am error has occured: Code = " + error.code);
}

function photoFail(error){
    alert("Am error has occured: Code = " + error.code);
}

Cant get PhoneGap to access IOS camera. Button issues

1 Answers1