I am using phonegap 3.0.0
And in the process of attempting to upload a file to the server I am getting a couple things that are unexpected. First thing, a script error:
Error: SyntaxError: Unexpected token ':' line 624 of phonegap.js
(which I think is a lot older version of the js to begin with, as I could only find one on github)
Next thing I am getting which I don't see why/how this would prompt when I have never seen it on other apps.. is a little alert dialog:
When I click OK on the dialog thats when it attempts to carry out the rest of the script, and gives me the above error.
and the script I am using to upload is based almost to the letter the same as the one found on the phonegap site.. http://docs.phonegap.com/en/3.0.0/cordova_file_file.md.html#File
$('#select_photo').on('click', function()
{
$('#choice_of_file').click();
});
$('#upload_photo').on('click', function()
{
if(fmr.nullCheck($('#choice_of_file').val()) == true)
{
alert('Please Choose a Photo');
}
else
{
uploadPhoto($('#choice_of_file').val());
}
});
// Wait for device API libraries to load
//
(function(){document.addEventListener("deviceready", onDeviceReady, false);})();
// device APIs are available
//
function onDeviceReady() {
// Retrieve image file location from specified source
navigator.camera.getPicture(
uploadPhoto,
function(message) { alert('get picture failed'); },
{
quality : 50,
destinationType : navigator.camera.DestinationType.FILE_URI,
sourceType : navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI(domainURL+'upload/wizard/'+MembId), win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("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);
}
the HTML for the form its reading..
<div style="position:absolute;top:-2000px;left:-2000px;background-color:#FFF;z-index:0" id="hide_file_input">
<form enctype="multipart/form-data" id="upload_profile_image" action="#none" method="post">
<input type="file" id="choice_of_file" name="choice_of_file">
</form>
</div>
Filekey should be the name attribute of file field
options.fileKey="choice_of_file";
Also it will be better if you can call deviceready before all functions are executed and put navigator.camera.getPicture in the onclick event of file field
Related
I have been using phonegap and am trying to download wallpaper jpgs to the device camera roll. I have been testing this on the mobile phonegap app connecting to phonegap server. The code I am using goes as follows:
function DownloadFile(URL, Folder_Name, File_Name) {
if (URL == null && Folder_Name == null && File_Name == null) {
return;
}
else {
download(URL, Folder_Name, File_Name); //If available download function
}
}
function download(URL, Folder_Name, File_Name) {
//step to request a file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
function fileSystemSuccess(fileSystem) {
var download_link = encodeURI(URL);
ext = download_link.substr(download_link.lastIndexOf('.') + 1); //Get extension of URL
var directoryEntry = fileSystem.root; // to get root path of directory
directoryEntry.getDirectory(Folder_Name, { create: true, exclusive: false }, onDirectorySuccess, onDirectoryFail); // creating folder in sdcard
var rootdir = fileSystem.root;
var fp = rootdir.toURL(); // Returns Fulpath of local directory
fp = fp + Folder_Name +"/"+ File_Name + ".jpg"; // fullpath and name of the file which we want to give
filetransfer(download_link, fp);
}
function onDirectorySuccess(parent) {
// Directory created successfuly
}
function onDirectoryFail(error) {
//Error while creating directory
alert("Unable to create new directory: " + error.code);
}
function fileSystemFail(evt) {
//Unable to access file system
alert(evt.target.error.code);
}
}
function filetransfer(download_link, fp) {
var fileTransfer = new FileTransfer();
// File download function with URL and local path
fileTransfer.download(download_link, fp,
function (entry) {
console.log("cdvfile://localhost/persistent/" + fp);
alert("download complete: " + entry.fullPath.slice(1));
},
function (error) {
//Download abort errors or download failed errors
alert("download error source " + error.source);
alert("download error target " + error.target);
//alert("upload error code" + error.code);
}
);
}
What is interesting is that when I click my button that fires these methods I receive an alert saying download complete: file_name. However, there never appears an image in my camera roll. Is this an iOS issue? I've tried looking at this natively as opposed to simulating it with phonegap serve and it makes no difference.
I've also tried a file_path like so "cdvfile://localhost/persistent/"+Folder_name+"/"+ File_name+"."+ext;
with no different results.
In a difference post http://community.phonegap.com/nitobi/topics/file_download_not_working_properly_on_ios the answer for iOS was to use
<access origin="*" />
I made sure to use that in my config.xml file.
Does anyone have an idea as to what I am missing? This code has worked for others and oddly it states it completes correctly.
I'm using Cordova to make android and iOS app, now I would like to check if file already exist in the dirctory.
First I download file from server and save it locally using the code below
$scope.downloadFile = function(){
alert(cordova.file.dataDirectory)
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://example.com/files/th/001.mp3");
var downloadPath = cordova.file.dataDirectory+'001.mp3'; // ANDROID
fileTransfer.download(
uri,
downloadPath,
function(entry) {
$scope.savepath = entry.toInternalURL();
alert("download complete: " + entry.toURL());
alert('saved at : '+entry.toInternalURL());
},
function(error) {
alert("download error source " + error.source);
alert("download error target " + error.target);
alert("upload error code" + error.code);
},
false,
{
headers: {
"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
);
}//End DownloadFile
and I would like to check if the file already exist using checkIfFileExists(path) method
function checkIfFileExists(path){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
//alert('result: '+JSON.stringify(fileSystem.root))
fileSystem.root.getFile(path, { create: false }, fileExists, fileDoesNotExist);
}, getFSFail); //of requestFileSystem
}
function fileExists(fileEntry){
alert("File " + fileEntry.fullPath + " exists!");
}
function fileDoesNotExist(){
alert("file does not exist");
}
function getFSFail(evt) {
console.log(evt.target.error.code);
}
I checked on my phone, the file is already saved to Android/data/com.myname.myappname/file/001.mp3
but the problem is the code always show file does not exist whenever I use the path like
cordova.file.dataDirectory+'001.mp3';
or cdvfile://localhost/persistent/files/001.mp3
or 'cdvfile://localhost/files/001.mp3'
so I would like to ask that the real path that I need to use to check if the file exist or not.
Please provide me any suggestion.
Regards.
Do you need to use or CheckFileExists? You could try using Phonegap's FileReader method?
var reader = new FileReader();
var fileSource = cordova.file.dataDirectory+'001.mp3'
reader.onloadend = function(evt) {
if(evt.target.result == null) {
// Null? You still have a problem: file doesn't exist.
} else {
// Otherwise the file exists.
}
};
//Check if the file exists
reader.readAsDataURL(fileSource);
Following this yet unanswered question I ran some tests to see where the problem is - in my side or in the server side.
So taking into account it might be a image codec problem, I have tried to upload a text/plain file to my server using post method.
First, I made sure the file exists by calling readAsText() method:
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("textfile.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("Read as data URL");
alert(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("Read as text");
alert(evt.target.result);
};
reader.readAsText(file);
}
function fail(evt) {
alert(evt.target.error.code);
}
After I get an alert with text file URL and text file content, I know this is my file. Now I'm uploading it:
function gotFile(file){
// alert('gotFile')
// readDataUrl(file);
// readAsText(file);
alert(file.fullPath)
uploadText(file.fullPath)
}
function uploadText(fileURI) {
alert('uploading file...')
function win(r) {
alert("Code = " + r.responseCode);
alert("Response = " + r.response);
alert("Sent = " + r.bytesSent);
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
alert("http_status = " + error.http_status);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "text/plain";
var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("https://mysecureurl.com/?filename="+options.fileName), win, fail, options);
}
I get fileTransfer error code 1 (file not found) and http status code 411 (malformed request).
I have all the permission including fileTransfer in my android project and also <access origin="*"/>. My server administrator says he gets the request but something is broken in the middle when I am sending file from phonegap (unlike normal browser requests) and he couldn't figure out what is it.
I am really stuck here. Is there any PhoneGap limitation I am not aware of? Or is there anyway to capture phone's http body request so I could debug it?
The problem is with content-type. Phonegap sets Content-Type: multipart/form-data;boundary=+++++ omitting the whitespace in between. Some servers can be picky with this. I solved the issue by rewriting this header and adding a whitespace as follows: Content-Type: multipart/form-data; boundary=+++++. Although this sounds like a hack, and solves the issue for me, this change needs to be incorporated into phonegap Android library in future releases.
It just happend on Android platform and fine on iOS, so try to set options.chunkedMode=false just on Android (the chunkedMode options default is true). see https://github.com/apache/cordova-plugin-file-transfer/pull/141#issuecomment-291776345
I am trying to upload a file to my server with Phonegap. I am currently stuck when an error that says:
InvalidCastException
Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
The HTML + Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<title>File Transfer Example</title>
</head>
<body>
<button id="uploadPhotoButton">Upload a Photo</button>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript">
$(document).one("pause", function () {
console.log('Paused.');
});
$(document).one("resume", function () {
console.log('Resumed.');
});
$(document).one("deviceready", function () {
console.log('Device is ready.');
});
$(document).one("backbutton", function () {
console.log('Back button pressed.');
});
$(document).ready(function () {
console.log('DOM is ready.');
$(document).on("click", "#uploadPhotoButton", function (e) {
console.log('clicked button');
getImage();
});
function getImage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto, function (message) {
alert('get picture failed');
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "http://my.server.co.nz/pages/fileupload", win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
alert(r.response);
}
function fail(error) {
alert("An error has occurred: Code = " = error.code);
}
});
</script>
</body>
</html>
The complete error log.
GapBrowser_Navigated :: /app/www/index.html#/app/www/uploadtest.html
Log:"clicked button"
The thread '<No Name>' (0xf55026a) has exited with code 0 (0x0).
The thread '<No Name>' (0xe3f0326) has exited with code 0 (0x0).
INFO: AppDeactivated
INFO: AppActivated
Log:"Paused."
The thread '<No Name>' (0xf1a02e6) has exited with code 0 (0x0).
Log:"Resumed."
The thread '<No Name>' (0xf2a01d2) has exited with code 0 (0x0).
options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll
A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll
InvalidCastException
Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
A first chance exception of type 'System.NullReferenceException' occurred in Lion.MyApp.dll
The thread '<No Name>' (0xfdc025e) has exited with code 0 (0x0).
Log:"Error in error callback: FileTransfer1325332352 = ReferenceError: Invalid left-hand side in assignment"
The thread '<No Name>' (0xfa60286) has exited with code 0 (0x0).
Does anyone have an idea on how to make this work?
Thanks!
W
I'm thinking that you are malforming your options value. Do you need to pass JSON or an actual object?
Right now you are passing an array with text in it.
options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
The error seems to involve deserialization issues.
Put your getImage, uploadImage, win, fail outside of $(document).ready 's inline function call.
Reference to win and fail are actually closure, and phone gap gets it as null when it is trying to access those methods directly. Phonegap is probably expecting a global function instead of hidden function inside a function.
PhoneGap's executes its code out side javascript context, what may work in true javascript fashion may not work correctly with phonegap.
I had a problem similar to yours. I solved this, changing mimeType parameter to 'text/plain'.
Do you use params to send? If it's false I think you need send empty params.
I had this problem before, try to prepare the image in the html first, and dont take it directly from the navigator, it may not saving the taken photo in it cash ;)
In my solution I suppose to have an image tage with id ='camera_image'
img id='camera_image'...
Then i set all the variables of the image in it and I upload it (as you will see in the following code).
here's the 2 functions i used:
function takephoto(){
navigator.camera.getPicture(
function(uri){
$('#camera_image').show();
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
uploadPhoto(img);
alert("Success");
},
function(e) {
console.log("Error getting picture: " + e);
},
{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI
});
// Get URI of picture to upload
var img = document.getElementById('camera_image');
var imageURI = img.src;
if (!imageURI || (img.style.display == "none")) {
alert("Take picture or select picture from library first.");
return;
}
}
for choosing an existing photo:
function choosephoto(){
navigator.camera.getPicture(
function(uri) {
$('#camera_image').show();
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
uploadPhoto(img);
},
function(e) {
console.log("Error getting picture: " + e);
},
{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
});
// Get URI of picture to upload
var img = document.getElementById('camera_image');
var imageURI = img.src;
if (!imageURI || (img.style.display == "none")) {
alert("please select a pic first");
return;
}
}
in the upload function:
function uploadPhoto(img) {
imageURI = img.src ...
ps: sorry for the formatting of my code, it doesn't fix well.
I am doing project in android phonegap.Here I want to upload images and videos to remote server.
I used the following link.
http://zacvineyard.com/blog/2011/03/upload-a-file-to-a-remote-server-with-phonegap
I also change some options like options.chunkedMode = false ,android:debuggable="true" and
. But still it shows error code 3.I am using the cordova-2.0.0.js version.Can anyone suggest some answer.
My js code is
**
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
// Do cool things here...
}
function getImage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},
{quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "url of ther server/upload.php", win, fail, options, true);
console.log("H");
}
function win(r) {
console.log("HIIIIIiiii");
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
alert(r.response);
}
function fail(error) {
alert("There is something");
alert("An error has occurred: Code = " + error.code);
}
</script>
**
and my php code is
<?php
print_r($_FILES);
$new_image_name = "namethisimage.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$new_image_name);
?>
Thanks.
Have you added the URL in question to your whitelist?
e.g. in config.xml do you have something like:
<access origin="www.myurl.com" subdomains="true" />
or
<access origin="*" />
which allows all URLs.
Error code 3 is a FileTransferError.CONNECTION_ERR by the way.