Friday, March 6th, 2009

input type=”file” multiple; now in a real browser!

Category: Browsers, WebKit

<p>

Justin Mecham is excited to note that input type=”file” multiple is implemented in a browser, namely Safari 4. You can see the commit here.

Justin notes:

If you’re using Safari 4 Public Beta you should be able to select more than one file. Once selected, it should say “N files” instead of the filename that would normally show up.

I hope that more browsers support this soon along with changes to XMLHttpRequest that will allow for client-side progress bars (see WebKit’s Week #6). Maybe we can finally get rid of all of these Flash and elaborate JavaScript workarounds for supporting multiple file uploads.

Related Content:

Posted by Dion Almaer at 12:40 pm
23 Comments

++++-
4.1 rating from 68 votes

23 Comments »

Comments feed TrackBack URI

Opera has supported this for a while (based on the earlier Web Forms 2.0 standard):
<input type=”file” min=”1″ max=”9999″>

Comment by dbloom — March 6, 2009

Dion, can I get an AMEN??

Of course it’s not surprising that IE doesn’t do it, not won’t until 2018 (Q4), but I’m incredibly disappointed that Mozilla hasn’t done it yet and that WebKit took so long. And Adobe’s latest security “enhancement” has made the Flash hack a nightmare.

dbloom: I had no idea, that’s great. I’ll put it on my task list to handle Opera in the dojo FileUploader.

Comment by AnM8tR — March 6, 2009

dbloom: Dion said “in a /real/ browser”.

(Just kidding, Opera fans. Couldn’t resist. :) )

Comment by kswartz — March 6, 2009

Hmmm. I wonder if they’ll let us style the button and field. Probably not. Can’t tell by the commit. Instead of calling it a file uploader they should call it a pimple on your page.

Comment by AnM8tR — March 6, 2009

Mozilla has had this in the chute for a bit (https://bugzilla.mozilla.org/show_bug.cgi?id=63687#c10), just wasn’t a high priority I guess.

Comment by TNO — March 6, 2009

I’m currently implementing Digitarald’s MooTools / SWF based FancyUpload2 ( http://digitarald.de/project/fancyupload/ ) which is 100 times more awesome than this could ever be.

You have events litterally everywhere and real progress bars, JSON responses and all you can ever wish for. It even works in Flash 10 now, and i’ve got it working in IE6, 7, 8, FF, Chrome, Webkit, opera *right now*

Demo’s here:
http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue/?sort=3

All i’m gonna do with it now is implement a nice Iframe fallback for those who have no flash or other problems

Comment by SchizoDuckie — March 6, 2009

@TNO: If you have a Bugzilla account you can vote for the bug. As did I. If a certain threshold is reached the priority of that bug will go up.

Comment by MarcDiethelm — March 6, 2009

Most of us (at least on the Mac version) still can’t use file inputs at all (eg they never open the file prompt). How weird that multiples work fine. I tested this, and it does not work.

Comment by eyelidlessness — March 6, 2009

@MarcDiethelm
.
I do indeed have an account, and ironically, its not a high priority for me either, lol. (Most my votes go into JavaScript language features and bugs)

Comment by TNO — March 6, 2009

Honest question, you guys, why don’t you use flash for everything ? where’s the trick ?

Comment by akaJ — March 6, 2009

@eyelidlessness: I don’t think there are any known reports of this in WebKit’s bug database. Would you mind filing one? https://bugs.webkit.org/

@AnM8tR: Some amount of styling should work. Try using this pseudo-element: input[type="file"]::-webkit-file-upload-button

Comment by adele — March 7, 2009

Hi there,
I don’t know but I am using Safari 4 beta on windows but I am not able to select multiple files is there any special way to declare input type?

Please let me know .
Thanks.

Comment by ashuvashu — March 7, 2009

@akaJ:
http://weblogs.mozillazine.org/roadmap/archives/2007/03/the_open_web_and_its_adversari.html

@MarcDiethelm:
I changed my mind and voted.

Comment by TNO — March 7, 2009

@TNO: thanks for the link.

But still, I don’t understand. Flash & the Adobe stack don’t fit the need of your projects ? You don’t know Flash ? or the Open stack is the solution to your problems ? or maybe you fell part of the Open stack and the input that you can give on, make it a valuable feature for your bussiness ?

Comment by akaJ — March 7, 2009

@akaJ
Regardless of the claims, Flash is not installed on 95% of client computers nor do they necessarily want it, whereas a browser that supports html4, some level of XSL and JavaScript is readily available. Some may claim that all you have to do is prompt the user to upgrade, but I don’t see why you would have to if the browser contains what is needed to solve the problem in most, if not all situations.
.
The flash plugin comes with an overhead I always saw as unacceptable and most of the time unnecessary for what it would offer in return. I don’t the need to waste 120k+ for a simple image flipper or navigation menu.
.
Accessibility and SEO is not as straightforward since its a binary format. Of course there is a workaround lately for that, but I don’t see a reason to go through the effort when native markup can solve the problem with little involvement from me.
.
It doesn’t promote open source. I can’t right click on any Flash item I find and choose “View Source”.
.
I don’t want to pay for Adobe’s development tools nor do I want to recompile code every time I make a minor change.
.
The ActionScript language will not be compliant with newer JavaScript versions and are walking down their own paths. I don’t see a reason to invest significant time in ActionScript when ES3.1 and it’s successors may in fact do the same job more succinctly if not better. Plus its backed by an international standard and will be supported by all significant browser vendors.
.
Flash will no longer be able to claim a significant speed advantage due to the recent advances in JavaScript JIT technology and browser backend support, especially when Mozilla and the others start moving to OpenGL in the near future.
.
Flash technology currently competes with Silverlight, JavaFX and the native browser, in the long term I see the browser winning since it has the lowest barrier for entry and lowest cost for development and minimal end user involvement. I don’t see a reason to waste my time on a technology, and possibly a language which may be heading for a dead end, if not a not so popular future.

Comment by TNO — March 8, 2009

Almost forgot, I can’t necessarily move my Flash application over to the IPhone or other mobile devices due to some policy restriction or incapability of the web browsing device.
.
Flash is also application centric, not document centric, so there are many hurdles in the way of me developing 100% in Flash for larger documents and content driven sites. I’ve also never seen a CMS system available for flash that doesn’t make my wallet explode, so that’s a huge killer for me as well.

Comment by TNO — March 8, 2009

@akaJ
In addition to TNO’s arguments (which are bulls eye) there’s also the fact that Flash is when shit hits the fan nothing but ActiveX2.0 and a binary and proprietary format for creating what evil tongues (me among others) like to refer to as “distributed desktop applications” and ActiveX2.0 and has virtually nothing to do with what the same people mean when we refer to “web technology” …. ;)

Comment by ThomasHansen — March 9, 2009

I agree with “web technology” and bulls eye arguments.

The thing I want to understand is, whether or not you choose the (open)web-stack because it’s technically better and *far* better in the long run. It looks like I have my answer.

@TNO: you hit the point with “I can’t necessarily move my Flash application over to the IPhone”, the fact is the real mobile application like latitude, ou gmap which really takes advantages of using tem from a cellular are made with “native” tools and don’t run in the browser. Instead of getting mobile browser access to special devices like GPS or camera, they choose to use their own tools, and force developpers to deploy a new client and a relatively new server. It may be the choice of vendors like blackberry and apple, but not the choice of the dozens of mobile vendors.

Comment by akaJ — March 9, 2009

How did you guy ended up with the boring flame Flash VS JavaScript?
This Safari 4 multiple files works like a charm. I already created two simple functions to send one or more files with new XMLHttpRequest events via handler Object … it’s great, it responds as well as FileReferences in AS does, and if you are patience this evening I’ll write a post with a complete and simple example with progress bar and PHP on the server (few lines, really, no dependencies or libraries needed in both client and server side)

I can’t wait to see this implemented with the same W3 logic in both FireFox and Opera, good stuff Safari Team!!!

Comment by WebReflection — March 9, 2009

@WebReflection: It’s my fault, I though that it could be a place to grow my knowledge about webdev. If you know a better place for that tell me where. Plus, one don’t say ‘will do’, but ‘have done’.

Comment by akaJ — March 9, 2009

@eyelidlessness: If you have any input managers installed for Safari, you may need to uninstall them to get this to work.

Comment by adele — March 9, 2009

@akaj: as a side note, in our office there are four linux-only developers were the flash player is unstable and will eventually stop working. More than that, not a single flash uploader has ever worked on our Ubuntu stations, ever.
Ajax and native interfaces do not have these problems, so you are opening your systems to more users.

Comment by icoloma — March 10, 2009

@akaj: Flash is a proprietary platform, that’s the main reason why I avoid it at all costs in my webapps.

Comment by andysky — April 7, 2009

Leave a comment

You must be logged in to post a comment.