Marco Cuccagna Marco Cuccagna - 4 months ago 69
Ajax Question

Upload image with phonegap using ajax

I'm developing an application using phonegap,
my app, capture an image from camera or gallery, i move to a specific folder and after that i want to upload it to a server. I upload some data too from a form.
My problem is that everything works if i use an image from the gallery but it doesn't work if i capture it from camera. Here is my code js.

var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}

function onPhotoDataSuccess(imageURI) {

var Image = document.getElementById('Image');
var form = document.getElementById('up');
var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
Image.style.display = 'block';
form.style.display = 'block';
b1.style.display = 'none';
b2.style.display = 'none';
Image.src = imageURI;
movePic(imageURI);
}

function capturePhoto() {
// Take picture using device camera and retrieve image
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
});
}

function getPhoto(source) {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}

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

/*****************save*****************/

function movePic(file){
window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError);
}
//Callback function when the file system uri has been resolved
function resolveOnSuccess(entry){
var d = new Date();
var n = d.getTime();
var newFileName = n + ".jpg";
var myFolderApp = "folder";
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
//creo la cartella geofolder e salvo le foto scattate
fileSys.root.getDirectory(myFolderApp,
{create:true, exclusive: false},
function(myFolderApp) {
entry.moveTo(myFolderApp, newFileName, successMove, resOnError);
document.forms['up'].foto.value = newFileName;

},
resOnError);
},
resOnError);
return newFileName;
}

//Callback function when the file has been moved successfully
function successMove(entry) {
//Store imagepath in session for future use
// like to store it in database
sessionStorage.setItem('imagepath', entry.fullPath);
}

function resOnError() {
alert(error.code);
}

////upload///

$("#upload").click(function(){
//some variable

uploadimage(foto);
$.ajax({
type: "POST",
url: "http://x.org/upload.php",
data: {//some data from the form},
success: function(responce){
if(responce=='success')
{
alert('ok');
}
else
{
alert("errore");

}
}
});
return false;});

function uploadimage(foto) {

var Image = document.getElementById('Image').getAttribute("src");

var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=foto;
options.mimeType="image/jpeg";

var params = new Object();
params.nome = "test";

options.params = params;
options.chunkedMode = false;

var ft = new FileTransfer();
ft.upload(Image, "http://x.org/uploadphoto.php", win, fail, options);
}

function win() {
alert("ok bro");
}
function fail() {
alert("not bro");

}

Answer

the problem is in movePic() function:

you are trying to upload an uri that no longer exists because you move it!

try entry.copyTo() instead of

entry.moveTo();