Comments on: PECL Uploadprogress example

By: Will Mason

Will Mason — Wed, 13 Feb 2008 20:14:53 +0000

I dot this thing working with a little tweaking, and the damn thing is brilliant. Here is my implementation. I find it simple, but thats because it fits into my custom MVC. Please note I am using jQuery for client-side DOM manipulation, and xAjax for Async requests (upload progress).

MARKUP (upload.html):

UPLOAD PROCESSOR (processUpload.php):

window.parent.fileUpload.finish();

JS HELPER (fileUpload.js):
$(function(){
fileUpload.init();
});
var fileUpload = {
timer: null,
timeout: 800,
iFrame: null,
init: function (){
$.xajaxLoad({bind: false});
},
start: function (el){
$.xajaxLoad.show();
this.checkProgress();
this.iFrame = $(’#’ + el.form.target);
el.form.submit();
},
checkProgress: function (){
var fUp = this;
if ($(’#xajaxLoad’).size() == 0)
return false;
if ($(’#uploadProgress’).size() == 0)
{
$(’#xajaxLoad’).append(
”
+ ”
+ ‘0%’
// + ‘0kb/s’
+ ‘* Seconds Left’
+ ‘Cancel‘
+ ”
);

$(’#UP_cancel’).click(function(e){
e.preventDefault();
fUp.iFrame.attr(’src’, ‘about:blank’);
clearTimeout(fUp.timer);
$.xajaxLoad.hide();
});
}
xDoUpdateBytesSent({
// avgSpeed: ‘UP_avgSpeed’,
timeLeft: ‘UP_timeLeft’,
percent: ‘UP_percent’,
percentBar: ‘UP_percentBar’,
id: $(’#UPLOAD_IDENTIFIER’).val()
});
this.timer = setTimeout(’fileUpload.checkProgress()’, this.timeout);
},
finish: function (){
clearTimeout(this.timer);
$.xajaxLoad.hide();
alertSaved();
}
};

XAJAX PHP FUNCTION:
public function xDoUpdateBytesSent()
{
$info = uploadprogress_get_info($this->getParam(”id”));
if ($info)
{
if (($asDiv = $this->getParam(”avgSpeed”)))
{
$tmp = wmFileSystem::bytesToHuman($info['speed_average']);
$this->xajaxResponse->addAssign($asDiv, “innerHTML”, $tmp.”/S”);
}
if (($tlDiv = $this->getParam(”timeLeft”)))
{
$this->xajaxResponse->addAssign($tlDiv, “innerHTML”, $info['est_sec'].” Seconds Left”);
}
if ($this->getParam(”percent”) || $this->getParam(”percentBar”))
{
$pDiv = $this->getParam(”percent”);
$pbDiv = $this->getParam(”percentBar”);
$tmp = floor($info['bytes_uploaded'] / $info['bytes_total'] * 100);
if ($pDiv)
$this->xajaxResponse->addAssign($pDiv, “innerHTML”, $tmp.”%”);
if ($pbDiv)
$this->xajaxResponse->addScript(”$(’#”.$pbDiv.”‘).css({width: ‘”.$tmp.”%’});”);
}
}
return $this->xajaxResponse;
}

By: Bill

Bill — Tue, 29 Jan 2008 10:19:40 +0000

Be sure you change the example in progress.php so that $uniq_id is actually $unique_id, or at least so the variables are the same. After I changed that it worked fine.

By: Whisky

Whisky — Thu, 24 Jan 2008 16:40:53 +0000

I’ve got the same problem Sid had in post No. 2. Does anybody have a solution?

By: miccio

miccio — Tue, 04 Dec 2007 14:47:43 +0000

links to examples are broken..

By: David

David — Tue, 14 Aug 2007 12:15:12 +0000

Sid - any chance you could let us know what tweaking you did, as I’m having a similar issue. Cheers.

By: Sid

Sid — Tue, 07 Aug 2007 01:23:03 +0000

Hey, I got it to work with a little bit tweaking. Cheers!

By: Sid

Sid — Tue, 07 Aug 2007 01:18:34 +0000

Thanks for the example, I understand it quite a bit more now. However I still can’t get it to run. I think I have installed the extension correctly but uploadprogress_get_info($unique_id) just doesn’t seem to be returning anything. Is there a way to verify that the extension is installed and working? My php version 5.2.1 (Ubuntu 7.04, apache 2) so that should be ok. And when I viewed phpinfo, I could see the extension listed there. Any idea?

By: Fredrik Davidsson

Fredrik Davidsson — Wed, 25 Jul 2007 11:44:28 +0000

Hi,

Thanks for the information!

While doing some tests I placed the UPLOAD_IDENTIFIER tag after the file tag and that doesn’t work.
It might help others if point that out.

Have a nice day.

Regards Fredrik
Sweden