Tips for Twits

Theming a file input field has always been notoriously hard. Thanks to the guys who wrote the Ext UploadDialog script, theres now a better and more aesthetically pleasing way to create a file upload. I tried using their script wholesale but ran into some problems with the layout. So i kinda hacked and extracted their Ext.ux.BrowseButton code.

So now you can use it simply with:

	new Ext.ux.BrowseButton({
		input_name: "uploadfile1",
		text: "Select a file"
		onInputFileChange: function() {
			alert("you chose " + this.getInputFile().dom.value);
		}
	})
 
	new Ext.ux.TBBrowseButton({
		input_name: "uploadfile2",
		text: "Select another file"
	})

The first chunk of code creates a Browse Button (File Input) control as with the name uploadfile1. and the second chunk of codes creates a ToolBar Browse Button with the name uploadfile2.

Hypothetically you should be able to add a ToolBar button but i havent quite gotten a ToolBar Browse Button to fit aesthetically well inside a form. Let me know if you all come up with any examples that do!

Meanwhile, 3 cheers for the guys who wrote the Ext UploadDialog script!!!

Download the jQuery progressbar here: EXT Browse Button
or view the demo here