SWFUpload for Webform File Component?

I needed a solution for progress bars when uploading files on webforms and first thought about SWFupload, but quickly realised that it wasnt workable in the timescales I had (a couple of hours). I have just hacked together a working system, and thought id share it here. It uses a PECL extension server side and jQuery on the client. No Flash needed at all!

1) Install the UploadProgress PECL extension (see http://freestylesystems.co.uk/blog/installing-pecl-uploadprogress-extens... for instructions on how)

2) create a file on your server called uploadprogress.php (or anything you like but my example assumes this name) with the following content:

<?
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

if (@$_GET['id']) {
       	echo json_encode(uploadprogress_get_info($_GET['id']));
       	exit();
}
?>

2) Add two new fields to your Webform. The first one below MUST be the first field in your Webform! Also make sure you set the input format to FullHTML for these fields when adding the markup!

Field1: (THIS MUST BE THE FIRST FIELD OF YOUR FORM!)
Name: Progress Bar Setup
Type: markup
Markup value:
<input id="progress_key" name="UPLOAD_IDENTIFIER" type="hidden" value="%username%server[REQUEST_TIME]" />

Field2: (i put this before the submit button, but do whatever you like)
Name: Progress Bar
Type: markup
Markup value:
<span id="uploadprogressbar" class="progressbar" style="display: none;">0%</span>

Download the JQuery progress bar plugin from: http://t.wits.sg/jquery-progress-bar/ extract it to your site and make sure the relevant bits are included in your template.

I then added the following script into the HEAD of my template:

var progress_key = '';

$(document).ready(function() {
       	$("#uploadprogressbar").progressBar();
});

function beginUpload() {

    $("#uploadprogressbar").fadeIn();
    progress_key = $("#progress_key").val();

    var i = setInterval(function() {
       	$.getJSON("/uploadprogress.php?id=" + progress_key, function(data) {
            if (data == null) {
               	clearInterval(i);
               	location.reload(true);
               	return;
            }
            var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
            $("#uploadprogressbar").progressBar(percentage);
       	});
    }, 1500);
}

Finally i had to edit /modules/webform/webform.module. I searched for "enctype" and found:

$form['#attributes']['enctype'] = 'multipart/form-data';

Quickly added a second line to make it:

$form['#attributes']['enctype'] = 'multipart/form-data';
$form['#attributes']['onsubmit'] = 'beginUpload();';

And that was that. The webform now displays an AJAX progress bar for file uploads. It doesnt seem to work in Chrome, but works elsewhere. Also Chrome shows the upload % in its status bar anyway so its no biggie!

Andy