cordova: upload image not working after taking picture

Question

Iam working on a iOS App developed with Apache Cordova aka Phonegap. I\'d like to upload photos in two steps: 1. Capture the photo and show the photo in small size 2. Upload the

Answer 1

Updated:

I have just re-factored your code, hope it will help you.

JavaScript

<script> 
    var sPicData; //store image data for image upload functionality

    function capturePhoto(){
        navigator.camera.getPicture(picOnSuccess, picOnFailure, { 
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            correctOrientation: true
        });
    }

    function getPhoto(){
        navigator.camera.getPicture(picOnSuccess, picOnFailure, { 
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
            correctOrientation: true
        });
    }

    function picOnSuccess(imageData){

            var image = document.getElementById('cameraPic');
            image.src = imageData;
            sPicData  = imageData; //store image data in a variable
    }

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

    // ----- upload image ------------
    function photoUpload() {
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = sPicData.substr(sPicData.lastIndexOf('/') + 1);
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;

        var params = new Object();
        params.fileKey = "file";
        options.params = {}; // eig = params, if we need to send parameters to the server request

        ft = new FileTransfer();
        ft.upload(sPicData, "http://XXXXXXXX.com/app/upload.php", win, fail, options); 
    }

    function win(){
        alert("image uploaded scuccesfuly");
    }

    function fail(){
        alert("image upload has been failed");
    }

</script>

HTML

<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
    <button class="camera-control" onclick="getPhoto();">From Photo Library</button><br>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>

    <button class="camera-control" onclick="photoUpload();">UPLOAD</button>
</div>

Answer 2

1. Capture the photo and show the photo in small size

• Here you can set image on success onCapturePhoto(fileURI) e.g.

  <img id="cameraPic" src= "" style="width:120px;height:120px;" > </img> 
  
  function onCapturePhoto(fileURI) {
    $("#cameraPic").attr("src", fileURI);
  }
  

2. Upload the photo for taking the picture one button to upload

    <button class="camera-control" onclick="photoUpload();">UPLOAD</button>

    function photoUpload() {
        var fileURI = $("#cameraPic").attr("src");

        /* YOUR CODE TO UPLOAD IMAGE*/
    }