How can I make a web progress bar in Ajax and Perl?

Question

Hello Everybody,

We use an ajax call for sending the data to the server. The server-side programming is done using Perl to save data into the database.

As we have files which are huge in size we want to display a progress bar which tells the user the percent data posted to the server. How can this be achieved using Ajax and Perl?

Thanks in Advance.

Answer 1

On a high level, I would likely do this by putting an empty display: block element with a colored background (or maybe an image) on the page with a width of zero, then run periodic AJAX callbacks to the server to get progress updates and increase the element's width accordingly. (I suspect that COMET would be a more efficient way to handle this sort of thing, as the descriptions I've read suggest that its a server-push version of AJAX, so it would eliminate the polling overhead, but I haven't really looked into COMET so I may be misunderstanding it.)

On a low level, the actual code to implement this depends heavily on how you're doing your AJAX. Are you using JQuery, CGI::Ajax, a different module (CPAN or otherwise), or your own hand-rolled AJAX-handling code?

Answer 2

There are a couple of prewritten scripts to achieve that out there:

• http://www.sibsoft.net/xupload.html
• http://www.webdice.org/uber_uploader/

Answer 3

Use Comet: push periodical Javascript tags that update the progress bar element in the page. You'll also need to send extra whitespace in order for browsers to update the page (find an equivalent of PHP's flush() in Perl).

For example, every 10% of uploaded data, push

<script type="text/javascript">progressBar(10)</script>
<script type="text/javascript">progressBar(20)</script>
...
<script type="text/javascript">progressBar(100)</script>

where progressBar(percentage) is a function that updates progressbar width (I'm assuming you have jQuery on the page):

function progressBar(percentage) {
    $('#progressbardiv').css('width', percentage + 'px');
}