How To: File Upload Progress Bar. No Flash. No PHP addons.

Upload progressbars are pretty common on the web these days, they add a touch of feedback to the long and mysterious process of uploading a file to a website. Unfortunately, the most common methods for doing so involve flash or baring that PHP addons that require a recompiling.

In this post I’m going to talk about creating an upload progress bar without the need for a clunky flash object. I’m going to do it with PHP, jQueryUI and a gracefully-degrading framework-independent library.

AJAX Upload

I stumbled across the aptly named AJAX Upload code library (developed by Andrew Valums) at work the other day.

The feature list is quite impressive:

  • multiple file select, progress-bar in FF, Chrome, Safari
  • drag-and-drop file select in FF, Chrome
  • uploads are cancellable
  • no external dependencies
  • doesn’t use Flash
  • fully working with https
  • keyboard support in FF, Chrome, Safari
  • tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;

The package includes a javascript library to handle DOM creation and magical ajax-ey transactions, as well as server-side code written in PHP, CGI, Java and Cold Fusion. The server-side code is required to manage the file upload, where some other solutions use APC or PECL’s uploadprogress, Andrews code makes clever use of PHP streams to track the upload progress.

Relevant snippet from php.php:

    function save($path) {
        $input = fopen("php://input", "r");
        $temp = tmpfile();
        $realSize = stream_copy_to_stream($input, $temp);
        fclose($input);

        if ($realSize != $this->getSize()){
            return false;
        }

        $target = fopen($path, "w");
        fseek($temp, 0, SEEK_SET);
        stream_copy_to_stream($temp, $target);
        fclose($target);

        return true;
    }

Why didn’t I think of that?!

The Javascript & HTML

Here’s an example of a really basic uploader utilizing jQueryUI’s progressbar.

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Upload Test</title>
    <link rel="stylesheet" href="/path/to/js/uploader/fileuploader.css" type="text/css" > 
    <link rel="stylesheet" href="/path/to/js/css/blitzer/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
    <script src="/path/to/js/jquery-1.6.1.min.js"></script> 
    <script src="/path/to/js/jquery-ui-1.8.13.custom.min.js"></script> 
    <script src="/path/to/js/jquery.altAlert.js"></script> 
    <script src="/path/to/js/uploader/fileuploader.js"></script>
</head>
<body>                                 
    <div id="progressbar"></div> 
    <a href="javascript:void(0)" id="uplbtn">Upload A File!</a> 
    <div id="file-uploader">       
        <noscript>          
            <p>Please enable JavaScript to use file uploader.</p>
            <!-- or put a simple form for upload here -->
        </noscript>         
    </div>
    <script>              
    $(function() {                        
            // Initialize the jQueryUI Progressbar
			$( "#progressbar" ).progressbar({
				value: 0
			});

			// Initialize the uploader
			uploader = new qq.FileUploaderBasic({
				debug: true,
				element: document.getElementById('file-uploader'),
				button: $('#uplbtn')[0],
		        action: '/js/uploader/uploader.php',
				multiple: false,

                // Update the progress bar
				onProgress: function(id, fileName, loaded, total){
					var percentLoaded = (loaded / total) * 100;
					$( "#progressbar" ).progressbar({
						value: percentLoaded
					});
				},                        

				// display a fancy message
				onComplete: function () { 
                    alert('Tada!');
				}		
		    });		
	});
    </script>
</body>
</html>

The real key here is updating the progressbar value in the uploader’s onChange event.

So there you have it!

11 thoughts on “How To: File Upload Progress Bar. No Flash. No PHP addons.

  1. Hi,
    Curious – are you using the entire script of php.php or just the part displayed above? What is in uploader.php?

  2. I believe I was using the entire php.php. Uploader.php is the script that processes the upload. 

  3. Would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

    lastminute spanje
    Fadal Repair

  4. Hey, I just hopped over to your site via StumbleUpon. Not somthing I would normally read, but I liked your thoughts none the less. Thanks for making something worth reading.

  5. Hey,

    I did not get how did he track the progress with php://input .. can you please explain that?

Leave a Reply

Your email address will not be published. Required fields are marked *