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?
