Android : PhoneGap - FormData Ajax submit does not work on device but works fine in browser

on Monday, November 10, 2014


I am facing a problem in which same piece of code works fine in browser but doesn't work on device.


Below Code works fine in browser


HTML



<form id="snapitform" name="snapitform" action="" enctype="multipart/form-data" method="post" >

<input type="file"><br>
<br />
<div>Your Name</div>
<input type="text" id="yourname" />
<br />
<div>Phone Number</div>
<input type="text" id="phonenumber" />
<br />
<input type="button" value="Upload Snap IT Service" onclick="GetImageBLOBObjectFromFile(); return false;" />

<br />
<div id="snapitresult">
</div>
</form>


JavaScript



function GetImageBLOBObjectFromFile() {

var dataURL;
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();

reader.onloadend = function () {

dataURL = reader.result;
console.log("dataURL: "+ dataURL);

var sPicData = dataURItoImageJPGBlob(dataURL);

var sLanguage = "EN";
var sLongitude = "56.324319";
var sLatitude = "25.133403";
var sLocation = "Some location";
var sName = $("#yourname").val();
var sPhoneNumber = $("#phonenumber").val();

var sNotify = "Y";
var objForm = document.getElementById('snapitform');

SnapITServiceAPI.InitializeValues();
SnapITServiceAPI.getSnapITUploadService(objForm, sLanguage, sLongitude, sLatitude, sLocation, sName, sPhoneNumber, sNotify, sPicData);

}

if (file) {
reader.readAsDataURL(file);
} else {
dataURL = "";
}

}
function dataURItoImageJPGBlob(dataURI) {
console.log("dataURItoImageJPGBlob().. " );

var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });

}

/* -------------------SnapITServiceAPI ------------------------------- */
getSnapITUploadService: function(objForm, sLanguage, sLongitude, sLatitude, sLocation, sName, sPhoneNumber, sNotify, sPicData) {
var requestMode = 'UPLOADSERVICE';

var objFormData = new FormData(objForm);

objFormData.append('requestmode',requestMode);
objFormData.append('user',ApplicationConfig.getUserName());
objFormData.append('pass',ApplicationConfig.getUserPassword());
objFormData.append('lang',sLanguage);
objFormData.append('curlongitude',sLongitude);
objFormData.append('curlatitude',sLatitude);
objFormData.append('curlocation',sLocation);
objFormData.append('yourname',sName);
objFormData.append('phonenumber',sPhoneNumber);
objFormData.append('notify',sNotify);

objFormData.append('picdata',sPicData);

$.ajax({
type: "POST",
url: ApplicationConfig.getUATServerURL(),
dataType: "text",
mimeType:"multipart/form-data",
data: objFormData ,
processData: false,
crossDomain: true,
contentType: false,
cache: false,
success: this.OnSnapITReachITUploadSuccess,
error: this.OnSnapITReachITUploadError,
complete: this.OnSnapITReachITUploadComplete
});

return false;
}


Now using PhoneGap/Cordova, I have following code to take picture and upload it via the above code.



navigator.camera.getPicture(function (imageData) {

var smallImage = document.getElementById('snapItPicToUpload');
smallImage.style.display = 'block';
smallImage.src = imageData; //display Pic on the device then proceed for upload


window.resolveLocalFileSystemURI(imageData, gotFileEntry,
function (message) {
alert('Failed URI FileSystem: ' + message);
});

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

}, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
targetWidth: 100,
targetHeight: 100
});

var gotFileEntry = function(fileEntry) {
alert("got image : " + fileEntry.fullPath);
fileEntry.file( function(file) {
var reader = new FileReader();
reader.onloadend = function() {
alert("Read complete!");
sessionStorage.setItem("fileUpload", JSON.stringify(reader.result));
};
reader.readAsDataURL(file);
}, function (messgae) {
alert('Failed inside FileEnter: ' + message);
});
};


When I take picture and submit it to server then I receive Out of Memory error message.(Error Code: 00346).


Is something wrong with my code Or I have to change something while calling from device.


Unfortunately I don't have access to backend/server side. I was just given services to consume. So i don't know how they are implemented on the server side.


0 comments:

Post a Comment