Creating a custom upload progress bar

Question

Hi,

I have seen all the upload progress bar plugins, widgets, etc. – they all suck. They're either too bulky with too much useless code or they don't work.

What I want to know is where I can read up on how to display an easy upload progress indicator. Most browsers have a status progress bar on them below, but it isn't very professional to use just that when dealing with clients.

How does the browser do it? I want to know the internals of how the browser works with for indicating the status of something uploading so that maybe I can make something using PHP & jquery.

Thanks.

Answer 1

Javascript/Ecmascript cannot mess with native browser functionalitys (which uses C/C++ mostly along with OS APIs which access TCP/UDP sockets.

To display a progressbar with JS you need serverfeedback. That can be accomplished by using a server polling like COMET for instance. But at this point, it's never that accurate like the browser buildin progressbar. It will change maybe with HTML5 WebSockets.

To have an accurate result, you need a continuous connection. You can fake and gild the client-server request delay, but it's still there. I don't know exactly how Flash handles this issues, but I guess it also does not have connection-oriented stream (Correct me if I'm wrong here).

Answer 2

There is no reliable method to get the progress of a file upload using JavaScript. Support for the XMLHttpRequest upload.onprogress event is missing in many browsers, even with HTML5, you will inevitably need to turn to Flash, or another method of file upload.

After asking this question, I eventually settled on using plupload for my uploading needs.

Answer 3

Since you want to use PHP, I'd start with the uploadprogress extension (PHP doesn't, by default, give you any data about until the upload is completed; this extension provides such server-side functionality). Note that it requires PHP 5.2+ and can be picky about configuration options. Also see its commentary and demo and troubleshooting hints). A short overview available in PHP documentation comments.

Using the extension, you can get some stats on the upload; then you can poll the server through AJAX and update some sort of progress bar.

To be a bit more specific:

• get an unique identifier for the form, and include it in a hidden field
• the upload should run in an IFRAME - some browsers won't allow DOM updates to the same page that is running the upload
• poll the server via AJAX (using the identifier to specify which upload you're interested in) and parse the result (IIRC, you'll get something like "bytes_uploaded => 123, content-length=> 1000")
• update your progress bar (the way you display it is up to you, I use "x% done" plus a graphical bar)
• redirect whole page when form uploaded OK

(Oh, and btw, check PHP's upload_max_filesize and post_max_size settings, as both limit the maximum upload size)

Answer 4

I know this isnt what you're looking for but I've been using plupload for uploads recently and it seems pretty good plus doesnt rely on flash or html5 exclusively

example:

---

• the url is the proccessing page (php file)
• container = the parent div or form that that the upload button lives in (its really important to set this - there are some example of how you can attach things to certain actions that plupload does. for example below you can see i have attached uploader.start();to the uploader.start(); hook.
• you should also be able to see how i've made a custom upload progress bar, by attaching to the upload progress hook

---

worth asking questions on the forum on the plupload site if you get stuck, they're good at answering them!

$(function(){
    //plupload
    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash',
        browse_button : 'pickfiles',
        container : 'form_2',
        max_file_size : '10mb',
        url : '<?php echo SITE_ROOT ?>plupload/upload.php',
        //resize : {width : 320, height : 240, quality : 90},
        flash_swf_url : '<?php echo SITE_ROOT ?>plupload/js/plupload.flash.swf',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"}
        ]
    });


uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    uploader.start();
});

uploader.bind('UploadProgress', function(up, file) {
    if(file.percent < 100 && file.percent >= 1){
        $('#progress_bar div').css('width', file.percent+'%');
    }
    else{
        $('#progress_bar').fadeOut(600);
    }                               
});