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.
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 }
With out words.. WOW, just hope all others browsers make the same too.
Yea that’s pretty cool. I have no doubt that other browsers will implement something like that in the future. That’s way too useful for them to not. MY hope is that they all decide to do it the same! ;)
It would be great to add the possibility to select multiple flies at once. That will remove the need of the ugly swf uploaders.
@stoyan: Since I have to grab the item with an index
item(0), it indicates that you somehow may be able to select more files at once. It really looks like a multi-file-upload might become possible with this at some point of time.@eft0 & wes p: I agree with you. Hopefully this gets implemented from the other browsers too. There actually is a W3C Working Draft for this, so they should implement it the same way according to the draft.
Love the new fresh look. Easier to read. I’ve always used Mozilla Firefox as my primary browser over Windows Explorer. Mozilla is less invasive, more secure, with less junk piling on your computer without having to worry about superfluous cookies filling your hard drive. Great Job Guys. However; I’m still having problems finding a compatible Google Toolbar. Any Suggestions ? ? ?
C.F.
Moncton,New Brunswick
Canada
When I heard about this new feature I did not think much of it but out of curiosity decided to read more about it and when I tested your example I was really amazed. This will definitely make things easier for web applications developers who are looking for a quick AJAX-like solution to previewing file contents for uploads without having to resort to heavy coding.
I forgot to add that I tested both of them on a Windows XP shortcut (.lnk file) and I get a popup that says “cannot be found.” twice.
This is great except that (as far as I can tell) file inputs in Firefox 3 return the file name and not the full file path.
Is there any way around this?
We need to be able to get the same result from IE as well as Firefox 2 and 3.
In reply to Sam Dutton,
Have you read this article?
http://www.mozilla.org/projects/security/components/signed-scripts.html
Without signing the script (just adding the user pref. in the browser signed.applets.codebase_principal_support and the privilege UniversalFileRead in the script), it works.
this is great
even we can check the with and heigth of an image before uploaded.
$(‘imageresult’).width
$(‘imageresult’).height
Love it! Rock on
thanks for this really useful article! =)
PFfffff, yeah great adds new feature, but stop breaking old ones !!!
This sucks completely, “.value” should return the full path juste like in any other browser including old version of ff.
Great, we invented a new thing to avoid the hacks…But you have to add hacks to do what used to work !!
So damn stupid !!
Kick ass app! a bit buggy yet though.
Version 0.2 coming ? :)
If I set the “value” property of an input(type=file) DOM object to a full path of a file, will it automatically populate this new “files” attribute?
Okay, just found out that setting the value property of an input(type=file) DOM object causes a security error.
Setting the “files” attribute from the value of the “files” attribute of another input(type=file) object also causes a security error.
This really sucks!
Why do they have to break existing code?
Amazing this man!
Now we can use a mix of IE/FFox codes to do this work to all…
are its not work in IE8 …check itout..yeda yeda
Iam new please give me an example how to use this function.
Thank you
Iam New please give me an example how to use thos function.
Thankyou