A working html5 AJAX uploader example, with progress logging

ajax_html5_file_upload.js

/**
 * Define a namespace
 */
var your_namespace = your_namespace || {};

/**
 * logging
 * usage: log('inside coolFunc',this,arguments);
 * http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
 */
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};

/**
 * Handles AJAX progress-meter uploads
 */
your_namespace.Upload = function()
{
	var that = this;
	
	/**
	 * Constructor.
	 */
	function init(args)
	{
		attachEvents();
	};
	
	/* Public */
	
	/**
	 * User has slected a file to upload
	 */
	this.fileSelected = function(e)
	{
		var file = getFile();
		
		// this will only be available on modern browsers
		if(file)
		{
			var fileSize = 0;
			
			if (file.size > 1024 * 1024)
				fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
			else
				fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

			log('Name: ' + file.name, that, file);
			log('Size: ' + fileSize, that, file);
			log('Type: ' + file.type, that, file);
		}
	};
	
	this.upload = function(e)
	{
		var file = getFile();
		
		// this will only be available on modern browsers
		if(file)
		{
                        e.preventDefault();
                        
			var form = $('#upload_form')[0];
			var fd = new FormData();
	    
			// form params - it's possible to get these from form.getFormData() but currently onl Firefox supports this. NB: order is important or S3 will reject.
			fd.append("key", form.key.value);
			fd.append("AWSAccessKeyId", form.AWSAccessKeyId.value);
			fd.append("acl", form.acl.value);
			fd.append("policy", form.policy.value);
			fd.append("signature", form.signature.value);
			fd.append("success_action_redirect", ""); // an empty string ensures S3 responds with a 204 No Content, not a 303 Location (redirect)
			fd.append("file", file);
			
			var xhr = new XMLHttpRequest();
			
			// event listeners 
			xhr.upload.addEventListener("progress", that.uploadProgress, false);
			xhr.addEventListener("load", that.uploadComplete, false);
			xhr.addEventListener("error", that.uploadFailed, false);
			xhr.addEventListener("abort", that.uploadCanceled, false);
			
			// stop the non-ajax form post
			e.preventDefault();
			
			xhr.open("POST", form.action);
			
			xhr.send(fd);
		}
	};
	
	this.uploadProgress = function(e)
	{
		log("uploadProgress", this, e);
	};
	
	this.uploadComplete = function(e)
	{
		log("uploadComplete", this, e);
		alert("Done. Issue a self.location now?")
		// upload was successful, continue to next step (redirect)
		//self.location = "http://";
	};
	
	this.uploadFailed = function(e)
	{
		log("uploadFailed", this, e);
	};
	
	this.uploadCanceled = function(e)
	{
		log("uploadCanceled", this, e);
	};
	
	/* Private */
	
	/**
	 * Attempt to get the file obj
	 */
	function getFile()
	{
		try
		{
			return $("#file")[0].files[0];
		}
		catch(e){}
	};
	
	/**
	 * Attaches events to page elements
	 */
	function attachEvents()
	{
		$('#file').change(function(e) {
		    that.fileSelected(e);
		});
		
		$('#submit').click(function(e) {
		    that.upload(e);
		});
	};
	
	// instantiate and return
	return init(Array.prototype.slice.call(arguments));
}

$(document).ready(function(){
  your_namespace.upload = new your_namespace.Upload();
});