soaked and soaped

That’s really neat: http://goosh.org/

<pre style="font-size:10px; font-family:"Monaco, Courier, monospace";> Goosh goosh.org 0.4.4-beta #1 Tue, 03 Jun 08 22:59:00 UTC Google/Ajax

guest@goosh.org:/web> help


I think this is one of most interesting and coolest new features for developers in Firefox 3: Access to file input fields via Javascript.

You can access the contents of a file input via the files attribute and it’s items. Each of the items have the following attributes and methods:

Attributes: fileSize and fileName

Methods: getAsDataURL, getAsBinary and getAsText

Then all that’s left is to throw the data into the parameters of an ajax request and send it to your server — no hacks with iframes anymore.

The following demo shows you these amazing new capabilities.
Go crazy.

Demo: Access the contents of a text file

Demo: Display an image

Code

 1 
 2 function writeText() {
 3   var data = $('text').files.item(0).getAsBinary();
 4   $('result').update(data);
 5   $('textsize').update($('text').files.item(0).fileSize);
 6 }
 7 
 8 function writeImage() {
 9   var data = $('image').files.item(0).getAsDataURL();
10   $('imageresult').src = 'data:' + data;
11   $('imagesize').update($('image').files.item(0).fileSize);
12 }

Resources

• Bugzilla #371432
• W3C Working Draft
• http://www.squarefree.com/burningedge/releases/trunk-for-firefox-3.html
• http://developer.mozilla.org/en/docs/nsIDOMFile