I've been using a really nice file uploader called Plupload for a couple of years now.  It's produced by the same guys that built TinyMCE, it's licensing is cheap and easy, and standard implementation isn't too hard. 

What I wanted on my latest project however isn't easily underrstood by looking at the Plupload examples on the site.  I wanted a simple drag and drop file uploader like Gmail and Box.net are using.  Just a panel onto which you drop files from your OS file manager, then they upload - nothing too fancy but very practical. 

Before we get into the code, let's see a quick screencast of the uploader in action.

This first chunk of code initializes Pluploader.

var uploader = new plupload.Uploader({\n            runtimes : 'html5',\n           url : 'http://mysite.com/js/filemanager/uploadFileHandler',\n            max_file_size : '500MB',
            flash_swf_url : flashDir+'plupload.flash.swf',
            silverlight_xap_url : flashDir+'plupload.silverlight.xap',
            button_browse_hover : true,
            drop_element : "dropFilesHere",
            autostart : true,
            container: "fileUploadingContainer",
            chunk_size: '1mb',
            unique_names: false
        });
        uploader.init();

Runtimes specifies which runtime(s) you want Plupload to use...available runtimes are HTML4, HTML5, Flash, Silverlight, Gears. Drop_element is the id of the div that you want to be the file drop zone. Container is a div that wraps the drop_element div. Make sure that autostart = true.

This next bit of code renders the file names, sizes, and progress bars when the files are dropped onto the drop zone.

uploader.bind('FilesAdded', function(uploader, files) {
            var renderString = [];
                
            $.each(files, function(i, file) {
                renderString.push('
');
                renderString.push('
'+file.name+' '+plupload.formatSize(file.size)+'
');
                renderString.push('');
                renderString.push('');
            });
            $('#dropFilesHere').html('').append(renderString.join(''));
            uploader.refresh();
            uploader.start();
        });

This last bit changes the size of the progress bar and resets the drop zone after all files have been uploaded.

uploader.bind('UploadProgress', function(up, file) {
            var $fileWrapper = $('#' + file.id);
            $fileWrapper.find(".plupload_progress").show();
            $fileWrapper.find(".plupload_progress_bar").attr("style", "width:"+ file.percent + "%");
        });

        uploader.bind('FileUploaded', function(up, file) {
            var $fileItem = $('#' + file.id);
            $fileItem.fadeOut('fast');
            $('#dropFilesHere').html('Drop files here');
            $('#dropFilesHere').removeClass('hover');
        });

And that's it! One last thing...to make the drop zone change it's style when you drag files over it, you need a bit more stuff.

$('#dropZoneId')
        .bind('dragover drop', function(e) {
            $(this).addClass('hover');
            e.preventDefault();
        })
        .bind('dragexit', function(e) {
            $(this).removeClass('hover');
            e.preventDefault();
        });

Go download Plupload, put the files on your server and give this trick a shot.  It's been tested in Firefox, Chrome, and Safari in XP, Windows 7, and OS X.

Thanks for reading!