CODEWITHSUNDEEP
javascriptandroidhtmlcordovaphonegap-plugins
Nehil Mistry
Nehil Mistry

Reputation: 1109

Multiple Image upload to server in Cordova

I tried uploading multiple Images to server. I am able to click images and display it in block but not able to transfer it to server. Error I am getting is 04-02 10:35:41.984: I/chromium(23772): [INFO:CONSOLE(104)] "Uncaught TypeError: Cannot call method 'lastIndexOf' of undefined", source: file:///android_asset/www/index.html (104)

Code: 

<!DOCTYPE html>
<html>
  <head>
    <title>Submit form</title>

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

    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 onPhotoURISuccess(imageURI) {

        // Show the selected image
        var smallImage = document.getElementById('smallImage');
        smallImage.style.display = 'block';
        smallImage.src = imageURI;
    }*/

     function onPhotoDataSuccess1(imageData) {

      var smallImage1 = document.getElementById('smallImage1');
      smallImage1.style.display = 'block';
      smallImage1.src = "data:image/jpeg;base64," + imageData;
    }
     function onPhotoDataSuccess2(imageData) {

      var smallImage2 = document.getElementById('smallImage2');
      smallImage2.style.display = 'block';
      smallImage2.src = "data:image/jpeg;base64," + imageData;
    }
     function onPhotoDataSuccess3(imageData) {

      var smallImage3 = document.getElementById('smallImage3');
      smallImage3.style.display = 'block';
      smallImage3.src = "data:image/jpeg;base64," + imageData;
    }

    function capturePhoto1() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess1, onFail, { quality: 20,
          destinationType: destinationType.DATA_URL,

          });
      }
      function capturePhoto2() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess2, onFail, { quality: 20,
          destinationType: destinationType.DATA_URL,

          });
      }
      function capturePhoto3() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess3, onFail, { quality: 20,
          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: 20,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }*/

     //selected photo URI is in the src attribute (we set this on getPhoto)
        var imageURI1 = document.getElementById('smallImage1').getAttribute("src");
        var imageURI2 = document.getElementById('smallImage2').getAttribute("src");
        var imageURI3 = document.getElementById('smallImage3').getAttribute("src");
        if (!imageURI1) {
            alert('Please select an image first.');
            return;
        }

        var items = [imageURI1,imageURI2,imageURI3];
        $.each(items,function(){
            uploadPhoto($(this));
        });


    function uploadPhoto(imageURI) {

        //set upload options
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        options.params = {
            firstname: document.getElementById("firstname").value,
            lastname: document.getElementById("lastname").value,
            workplace: document.getElementById("workplace").value
        }

        var ft = new FileTransfer();
        ft.upload(imageURI, encodeURI("http://www.xyz.co/AppData/upload.php"), win, fail, options);
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      console.log('Failed because: ' + message);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        //alert("Response =" + r.response);
        console.log("Sent = " + r.bytesSent);
    }

    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }

    </script>
  </head>
  <body>
    <form id="regform">


        <input type="button" onclick="capturePhoto1();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage1" src="" />

        <input type="button" onclick="capturePhoto2();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage2" src="" />

        <input type="button" onclick="capturePhoto3();" value="Capture Photo"><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage3" src="" />

        First Name: <input type="text" id="firstname" name="firstname"><br>
        Last Name: <input type="text" id="lastname" name="lastname"><br>
        Work Place: <input type="text" id="workplace" name="workPlace"><br>
        <input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();">
    </form>
  </body>
</html>

I guess there's some problem in function uploadPhoto(). Foreach loop is not handling imageURI properly. What can be the solution?

Upvotes: 0

Views: 3757

Answers (2)

Eshan Chattaraj
Eshan Chattaraj

Reputation: 368

<script type="text/javascript" charset="utf-8">
            ///// photo for 1 photo
		
            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
		
		
		
            var x=0;
            function onPhotoDataSuccess(imageURI)
            {
                x++;
                // Uncomment to view the base64-encoded image data
                console.log(imageURI);
			
                // Get image handle
                //
                var y = 'smallImage'+x;
                var smallImage = document.getElementById(y);
		  
                smallImage.src = "data:image/jpeg;base64," + imageURI;
                // Unhide image elements
                //
                smallImage.style.display = 'block';

		  
                // Show the captured photo
                // The in-line CSS rules are used to resize the image
                //
                //var fso=new ActiveXObject("Scripting.FileSystemObject");
                //fso.CopyFile("data:image/jpeg;base64," + imageURI,"file:///storage/sdcard/DCIM/");
		  
		
            }

            // Called when a photo is successfully retrieved
            //
		
            function onPhotoURISuccess(imageURI)
            {
                x++;
                // Uncomment to view the base64-encoded image data
                console.log(imageURI);
                //alert(imageURI);
                // Get image handle
                //
                var y = 'smallImage'+x;
                var smallImage = document.getElementById(y);
                //alert(smallImage);
                smallImage.src = imageURI;
                // Unhide image elements
                //
                smallImage.style.display = 'block';


		  
                //alert(smallImage.src)
            }

            // 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() 
            {
                // Retrieve image file location from specified source
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
                    quality: 50,
                    allowEdit: true,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
                });
                /* window.imagePicker.getPictures(
                function(results) {
                        for (var i = 0; i < results.length; i++) {
                                console.log('Image URI: ' + results[i]);
                                alert('Image URI: ' + results[i]);
                        }
                }, function (error) {
                        console.log('Error: ' + error);
                }, {
                        maximumImagesCount: 4,
                        width: 800
                }*/
            }

            // Called if something bad happens.
            //
            function onFail(message) 
            {
                alert('Failed because: ' + message);
            }

        </script>

Upvotes: 0

Ashokbharathi
Ashokbharathi

Reputation: 146

Please see if it help for you. your uploadPhoto function has the imageURI parameter but you are calling the uploadPhoto() function in button click without passing any parameter. your function should be

function intUpload(){
        var imageURI1 = document.getElementById('smallImage1').getAttribute("src");
        var imageURI2 = document.getElementById('smallImage2').getAttribute("src");
        var imageURI3 = document.getElementById('smallImage3').getAttribute("src");
        if (!imageURI1) {
            alert('Please select an image first.');
            return;
        }

        var items = [imageURI1,imageURI2,imageURI3];
        $.each(items,function(){
            uploadPhoto($(this));
        });
}

function uploadPhoto(imageURI) {
    //set upload options
    var d = new Date();
    var options = new FileUploadOptions();
    options.fileKey = "vImage" + d.getTime();
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    options.params = {
        firstname: document.getElementById("firstname").value,
        lastname: document.getElementById("lastname").value,
        workplace: document.getElementById("workplace").value
    };
    options.chunkedMode = false;

    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI("http://www.xyz.co/AppData/upload.php"), win, fail, options);
}

and your button click should be

<input type="button" id="btnSubmit" value="Submit" onclick="intUpload();">

also your html page doesn't include any jquery file but you are using $.each jquery function. please include the jquery file

Upvotes: 3

Related Questions