Uploading photos/media...only works once?

Craigstock · ‎07-10-2012

Hello,

I am new to phonegap and mobile development. But I have managed to build up a test app for blackberry which is working fine except for one VERY irritating and critical function.

The filetransfer() function only works once and then refuses to work again in the app. I basically have to reload the simulator/build to get it to work again.

The error I get is "error uploading file: 3"

I'm not sure if the DOM is caching the php file and is not re-loading it... but other than that I cannot seem to find the answer.

My Code is as follows:

index.html:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">

<title>Capture Photo</title>

<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />

<script type="text/javascript" src="jquery/jquery.js"></script>

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

<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />

<script src="jquery.mobile-1.1.1.min.js"></script>

<script src="json2.js" type="text/javascript"></script>

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

<script type="text/javascript" charset="utf-8">

function onLoad() {

document.addEventListener("deviceready", onDeviceReady, false);

}

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods

//

function onDeviceReady() {

// Now safe to use the PhoneGap API

}

function deviceInfo() {

document.getElementById('window.device.platform').innerHTML = 'window.device.platform = ' + window.device.platform;

document.getElementById('window.device.version').innerHTML = 'window.device.version = ' + window.device.version;

document.getElementById('window.device.uuid').innerHTML = 'window.device.uuid = ' + window.device.uuid;

document.getElementById('window.device.cordova').innerHTML = 'window.device.cordova = ' + window.device.cordova;

setNetworkType();

}

// invoked when application is resumed (brought to foregroud)

function doResume() {

console.log('doResume()');

}

// invoked when application is paused (sent to background)

function doPause() {

console.log('doPause()');

}

// invoked when application is online

function doOnline() {

console.log('Event: online\n' + 'Network Type: ' + navigator.network.connection.type + '\n');

setNetworkType();

}

// invoked when application is offline

function doOffline() {

console.log('Event: offline\n' + 'Network Type: ' + navigator.network.connection.type + '\n');

setNetworkType();

}

// register Cordova event listeners when DOM content loaded

function init() {

console.log('init()');

document.addEventListener("deviceready", deviceInfo, true);

document.addEventListener("resume", doResume, false);

document.addEventListener("pause", doPause, false);

document.addEventListener("online", doOnline, false);

document.addEventListener("offline", doOffline, false);

}

function unload() {

console.log('unload()');

}

function fail(error) {

navigator.notification.alert(error, null, "Error");

}

document.addEventListener("deviceready",loaded,false);

var pictureSource,

destinationType

function loaded() {

pictureSource=navigator.camera.PictureSourceType;

destinationType=navigator.camera.DestinationType;

navigator.geolocation.getCurrentPosition(success, error);

}

function getPhoto(imageURI) {

if (imageURI != null) {

var smallImage = document.getElementById('cameraImage');

// Unhide image elements

smallImage.style.display = 'block';

inputform.style.display = 'block';

// Show the captured photo

// The inline CSS rules are used to resize the image

smallImage.src=imageURI;

var element = document.getElementById('outuri');

element.innerHTML = imageURI;

var element = document.getElementById('upuri');

element.value = imageURI;

}

function capturePhoto() {

navigator.camera.getPicture(getPhoto, onFail, { destinationType: Camera.DestinationType.FILE_URI, quality: 50 });

}

function onFail(message) {

alert('Failed because: ' + message);

}

function success(position) {

$.ajax({

url: 'http://www.flyloops.net/mobile/bb/lookupvenue.php',

data: { lat: position.coords.latitude, lng: position.coords.longitude},

dataType: 'json',

success: function(data)

{

var venue_id = data[0];

var vname = data[1];

var element = document.getElementById('geolocation');

element.value = vname;

}

});

var smlelement = document.getElementById('latlng');

smlelement.innerHTML = 'Lat: ' + position.coords.latitude + ' Lng: ' + position.coords.longitude;

}

function error(error) {

alert(error.message);

}

function uploadImage() {

var smallImage = document.getElementById('cameraImage');

if (smallImage.src && smallImage.src !== "") {

var f = new FileTransfer();

f.upload(

// file path

smallImage.src,

// server URL - update to your own, and don't forget to

// include your domain in an access element in config.xml

"http://flyloops.net/mobile/bb/upload_photo.php",

// success callback

function(result) {

document.getElementById('uploadProgress').innerHTML =

result.bytesSent + ' bytes sent';

alert(result.responseCode + ": " + result.response);

},

// error callback

function(error) {

alert('error uploading file: ' + error.code);

},

// options

{

chunkedMode:false,

fileKey:"file",

mimeType: 'image/jpeg',

fileName: 'myImage.jpg',

params: { 'username':'jtyberg' }

});

}

// function formValidator()

//{

//var ptitle = document.getElementById('ptitle');

//var upuri = document.getElementById('upuri');

//alert(upuri.value);

//uploadPhoto(upuri.value);

//}

</script>

</head>

<body onload="init()" onunload="unload()">

<button onclick="capturePhoto();">Capture Photo</button> <br>

<img style="display:none;width:120px;height:120px;" id="cameraImage" src="" />

<br/><br/>

<p id="uploadProgress"></p>

<p id="outuri">

<div id="inputform" style="display:none"><h1>Add photo details...</h1>

<table width="100%">

<tr>

<td width="30%" style="font-size:14pt;">Venue:</td>

<td width="70%"><input type="text" id="geolocation" name="psswd2" size="35" style="font-size:14pt;"><br><div style="font-size:8pt" id="latlng"></div></td>

</tr>

<script>

$(document).ready(function(){

$("#fish_species").autocomplete("http://www.flyloops.net/autospecies.php", {

selectFirst: true

});

</script>

<tr>

<td width="30%" style="font-size:14pt;">Fish Species:</td>

<td width="70%"><input name="fish_species" id="fish_species" type="text" size="30" style="font-size:14pt;"/></td>

</tr>

<tr>

<td width="30%" style="font-size:14pt;">Photo Title:</td>

<td width="70%"><input type="text" name="title" size="35" style="font-size:14pt;" id="ptitle"></td>

</tr>

<tr>

<td width="30%" style="font-size:14pt;">Photo Caption:</td>

<td width="70%">

<textarea id="ta1" name="ta1" rows=5 cols=40 style="font-family:verdana;color:#202020;font-size:12pt;"></textarea>

</td>

</tr>

<tr>

<td colspan="2">

<input type="hidden" name="upuri" size="35" style="font-size:14pt;" id="upuri">

<center><input id="uploadButton" type="button" value="Upload" onclick="uploadImage();return false;" /></center>

</td>

</tr>

</table>

</form>

<a href="another.html">Another page</a>

</div>

</body>

</html>

My confix.xml is as follows:

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets"

xmlns:rim="http://www.blackberry.com/ns/widgets"

version="1.0.0.0">

<name>Cordova Sample</name>

<description>

A sample application written with Cordova.

</description>

<license href="http://opensource.org/licenses/alphabetical">

</license>

<feature id="blackberry.system" required="true" version="1.0.0.0" />

<feature id="org.apache.cordova" required="true" version="1.0.0" />

<feature id="blackberry.find" required="true" version="1.0.0.0" />

<feature id="blackberry.identity" required="true" version="1.0.0.0" />

<feature id="blackberry.pim.Address" required="true" version="1.0.0.0" />

<feature id="blackberry.pim.Contact" required="true" version="1.0.0.0" />

<feature id="blackberry.io.file" required="true" version="1.0.0.0" />

<feature id="blackberry.utils" required="true" version="1.0.0.0" />

<feature id="blackberry.io.dir" required="true" version="1.0.0.0" />

<feature id="blackberry.app" required="true" version="1.0.0.0" />

<feature id="blackberry.app.event" required="true" version="1.0.0.0" />

<feature id="blackberry.system.event" required="true" version="1.0.0.0"/>

<feature id="blackberry.widgetcache" required="true" version="1.0.0.0"/>

<feature id="blackberry.media.camera" />

<feature id="blackberry.ui.dialog" />

<access subdomains="true" uri="file:///store/home" />

<access subdomains="true" uri="file:///SDCard" />

<access subdomains="true" uri="*" />

<access uri="*" subdomains="true" />

<icon rim:hover="false" src="resources/icon.png" />

<icon rim:hover="true" src="resources/icon.png" />

<rim:loadingScreen backgroundColor="#CFCFCF"

foregroundImage="resources/loading_foreground.png"

onFirstLaunch="true">

<rim:transitionEffect type="fadeOut" />

</rim:loadingScreen>

<content src="index.html" />

<rimermissions>

<rimermit>use_camera</rimermit>

<rimermit>read_device_identifying_information</rimermit>

<rimermit>access_shared</rimermit>

<rimermit>read_geolocation</rimermit>

</rimermissions>

</widget>

The php file:

<?php include "../../db_connect.php" ?>

<?php

header("Expires: Tue, 01 Jul 2001 06:00:00 GMT");

header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

header("Cache-Control: no-store, no-cache, must-revalidate");

header("Cache-Control: post-check=0, pre-check=0", false);

header("Pragma: no-cache");

?>

<?php

print_r($_FILES);

$new_image_name=date("U");

$new_image_name .= ".jpg";

$into=$_FILES["file"]["tmp_name"];

$result = mysql_query("insert into test_table values

('','$into')");

move_uploaded_file($_FILES["file"]["tmp_name"], "/home/flylomfg/public_html/mobile/bb/uploads/".$new_image_name);

?>

Any help would be greatly appreciated!

Thanks,

Craig

Welcome!

Web and WebWorks Development

Uploading photos/media...only works once?