Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

New Contributor
Posts: 7
Registered: ‎07-10-2012
My Device: Bold 9700
My Carrier: MTN

Uploading photos/media...only works once?


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:
<!DOCTYPE html>
    <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;

        // invoked when application is resumed (brought to foregroud)
        function doResume() {
        // invoked when application is paused (sent to background)
        function doPause() {

        // invoked when application is online
        function doOnline() {
            console.log('Event: online\n' + 'Network Type: ' + navigator.network.connection.type + '\n');

        // invoked when application is offline
        function doOffline() {
            console.log('Event: offline\n' + 'Network Type: ' + navigator.network.connection.type + '\n');

        // register Cordova event listeners when DOM content loaded
        function 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() {
        function fail(error) {
            navigator.notification.alert(error, null, "Error");
                var pictureSource,
            function loaded() {
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
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) {
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) {
         function uploadImage() {
            var smallImage = document.getElementById('cameraImage');
            if (smallImage.src && smallImage.src !== "") {
                var f = new FileTransfer();
                    // file path
                    // server URL - update to your own, and don't forget to 
                    // include your domain in an access element in config.xml      
                    // 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
  mimeType: 'image/jpeg',
  fileName: 'myImage.jpg', 
                      params: { 'username':'jtyberg' } 

// function formValidator()
//var ptitle = document.getElementById('ptitle');
//var upuri = document.getElementById('upuri');

    <body onload="init()" onunload="unload()">
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <img style="display:none;width:120px;height:120px;" id="cameraImage" src="" />
<p id="uploadProgress"></p>
<p id="outuri">
<div id="inputform" style="display:none"><h1>Add photo details...</h1>
<!-- <form onsubmit='return formValidator()' > -->
<table width="100%">
<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>
        $("#fish_species").autocomplete("http://www.flyloops.net/autospecies.php", {
                                selectFirst: true
<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>
<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>
<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 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>
<a href="another.html">Another page</a>

My confix.xml is as follows:
<?xml version="1.0" encoding="UTF-8"?>


  <name>Cordova Sample</name>

      A sample application written with Cordova.


  <!-- Cordova API -->
  <feature id="blackberry.system" required="true" version="" />
  <feature id="org.apache.cordova" required="true" version="1.0.0" />
  <feature id="blackberry.find" required="true" version="" />
  <feature id="blackberry.identity" required="true" version="" />
  <feature id="blackberry.pim.Address" required="true" version="" />
  <feature id="blackberry.pim.Contact" required="true" version="" />
  <feature id="blackberry.io.file" required="true" version="" />
  <feature id="blackberry.utils" required="true" version="" />
  <feature id="blackberry.io.dir" required="true" version="" />
  <feature id="blackberry.app" required="true" version="" />
  <feature id="blackberry.app.event" required="true" version="" />
  <feature id="blackberry.system.event" required="true" version=""/>
  <feature id="blackberry.widgetcache" required="true" version=""/>
  <feature id="blackberry.media.camera" />
  <feature id="blackberry.ui.dialog" />

  <!-- Cordova API -->
  <access subdomains="true" uri="file:///store/home" />
  <access subdomains="true" uri="file:///SDCard" />

  <!-- Expose access to all URIs, including the file and http protocols -->
  <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"
    <rim:transitionEffect type="fadeOut" />

  <content src="index.html" />

  <rimSmiley Tongueermissions>
    <rimSmiley Tongueermit>use_camera</rimSmiley Tongueermit>
    <rimSmiley Tongueermit>read_device_identifying_information</rimSmiley Tongueermit>
    <rimSmiley Tongueermit>access_shared</rimSmiley Tongueermit>
    <rimSmiley Tongueermit>read_geolocation</rimSmiley Tongueermit>
  </rimSmiley Tongueermissions>


The php file:
<?php include "../../db_connect.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");
$new_image_name .= ".jpg";
$result = mysql_query("insert into test_table values
move_uploaded_file($_FILES["file"]["tmp_name"], "/home/flylomfg/public_html/mobile/bb/uploads/".$new_image_name);

Any help would be greatly appreciated!