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!


Comments

11 responses to “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?

    1.  Avatar
      Anonymous

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

  2.  Avatar

    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

  3.  Avatar
    Anonymous

    Thanks very much for this awesome Article. Nice topic to write about on my Blog. I might set a bookmark from another Website.

    taux zéro
    business loans unsecured

  4.  Avatar
    Anonymous

    I am pleased to say that this blog raises the belief of those reading it. I, for one, am really astonished. Please continue the good work.

    Business For Sale
    excessive sweating

  5.  Avatar

    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.

  6. Matthew Blott Avatar
    Matthew Blott

    Tried this code – works a treat in IE but not Firefox or Chrome, no idea why …

    1. I am unable to make it work in IE. Can you please share how you did it.

  7. can you please put a demo page for this ? thanks!

    1. ohryan Avatar

      There is a demo on the original developer’s page: http://valums.com/ajax-upload/

  8. MasterMind Avatar
    MasterMind

    Hey,

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

Leave a Reply

Only people in my network can comment.