Question

I’m currently using PhoneGap and I proceed to a FileTransfer Upload via my application. Unfortunately when sending a file, I have no notification and no progress bar.

I want to know if we can listen FileTransfer to perform calculations progress. (Or if there is another way to prevent the user of the progress of FileTransfer.

Thank you,

Yeppao

Code :

    var file;
var pictureSource;   // picture source
var destinationType; // sets the format of returned value

// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// PhoneGap is ready to be used!
//
function onDeviceReady() {
  pictureSource=navigator.camera.PictureSourceType;
  destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(fileURI) {
  file = fileURI;

}


function uploadFile() {
  alert('up begin');
  function uploadSuccess(success)
  {
    alert(success);
  }

  function uploadError(error)
  {
    alert(error);
  }

  var options = new FileUploadOptions();
  options.fileKey="file";
  options.fileName=file.substr(file.lastIndexOf('/')+1);
  options.mimeType="application/octet-stream";

  var params = new Object();
  params.title = $("#video-name").val();
  params.value2 = "param";

  options.params = params;
  options.chunkedMode = true;

  var ft = new FileTransfer();

  ft.upload(file, "http://myserver/file.php", uploadSuccess, uploadError, options);

}

// A button will call this function
//
function getFile() {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: pictureSource.PHOTOLIBRARY,
        mediaType: navigator.camera.MediaType.ALLMEDIA });
}

// Called if something bad happens.
//
function onFail(message) {
  alert('Failed because: ' + message);
}

Here’s the HTML Part :

   <div id="file-name"></div>
    <button style="height: 100px;background-color: #FFF;" data-role="button" onclick="getFile();">From Photo Library</button><br>
  <input type="text" value="" id="video-name" name="video-name" /> 
<input style="background-color: #FFF;" type="button" id="test" onclick="uploadFile()" name="test" value="Ok" />

Answer 1

Having a progress bar maybe tricky but if you use jquery mobile you could use $.mobile.showPageLoadingMsg and $.mobile.hidePageLoadingMsg