A Prototype Wrapper for the Yahoo Uploader

html example.haml

-form_for @company, :url => default_comany_url(@company) do |f|
      =hidden_field_tag :_session_id, session.session_id
      #logo_uploader{:style => "width: 100%; height: 20px; color:#fff; background-color:#000"}
        ="Upload new logo"

Prototype wrapper for the YUI Uploader.js

Uploader = Class.create({
	fileList: null,
	handler: null,
	uploaded:0,
	allowMultipleFiles: true,
	simUploadLimit: 1,
	parameterName: "file",
	filter: {
		images:{description:"Images", extensions:"*.jpg;*.JPG;*.png;*.PNG"},
		office:{description:"Office Document", extensions:"*.doc;*.DOC;*.docx;*.DOCX;*.xls;*.XLS;*.xlsx;*.XLSX;*.ppt;*.PPT;*.pptx;*.PPTX"}
	},
	fileFilter:null, 
	initialize: function(element_id,listeners,options) {
		YAHOO.widget.Uploader.SWFURL = "/uploader.swf";
		Object.extend(this,(options||{}));
		this.element = $(element_id);
		this.handler = new YAHOO.widget.Uploader(element_id);

		this.addListener("contentReady",this.contentReady);
		$H(listeners).each(function(pair){
			this.addListener(pair.key,pair.value);
		}.bind(this));
	},
	contentReady: function(event) {
		this.handler.setAllowMultipleFiles(this.allowMultipleFiles);
		this.handler.setSimUploadLimit(this.simUploadLimit);
		if(typeof this.fileFilter == "string")
			this.handler.setFileFilters(this.filter[this.fileFilter]);
		else if(typeof this.fileFilter == "object")
			this.handler.setFileFilters(this.fileFilter);
	},
	addListener: function(name, func) {
		this.handler.addListener(name, func.bind(this));
	},
	form: function() {
		return this.element.up("form");
	},
	action: function(){
		return this.form().readAttribute("action");
	},
	method: function() {
		return (this.form().readAttribute("method") || "POST");
	},
	uploadVars: function(){
		var form = this.form().serialize(true);
		form.format = "json";
		return form;
	}
});

Usage Example.js

new Uploader("logo_uploader",{
		fileSelect: function(event){
			this.handler.uploadAll(this.action(),this.method(), this.uploadVars() ,this.parameterName);
		},
		uploadCompleteData: function(event) {
			var ret = event.data.evalJSON();
			console.log(ret);
		}
	},
	{
		fileFilter: "images",
		allowMultipleFiles: false,
		parameterName: "company[logo]"
	});