Friday, February 27th, 2009

Multi-file upload in the Flickr and Gmail house

Category: Showcase

<p>I saw two posts at the same time on the topic of multiple-file uploading from a Web app which is a topic that we have covered many times before.

This time we have our good friend Scott Schiller posting on the Flickr uploader. He details the user experience from file selection, to progress, to completion, and then delves into the technical details including the Flash 10 changes:

Due to a change in the security model beginning with Flash 10, file selection must now begin via the user clicking directly on the Flash movie. With previous versions, you could call [Flash movie].selectFiles() from JavaScript and the selection dialog would be shown without requiring user action.

To keep the user experience consistent on Flickr where an HTML link could trigger the selection dialog, we made the Flash movie transparent and overlaid it on top of the HTML link. Thus, the Flash movie captures the click and the selection dialog works as expected. One might call this a legitimate, local form of clickjacking.

If repositioning the Flash movie is undesirable in your use case, another option is to render the link, text or button UI within the Flash movie itself and show the movie as a normal inline element.

Then, Gmail finally launched multifile uploading and people will rejoice.

It, as most of these things do, uses Flash:

This is the pragmatic choice, even though Gears has nice support. Time for browsers to step up!

Posted by Dion Almaer at 12:53 am
12 Comments

+++--
3.2 rating from 16 votes

12 Comments »

Comments feed TrackBack URI

First thoughts:
We should need to jump through all these hoops just to allow the users to upload multiple files! I can’t understand why browsers aren’t implementing it natively. Would it be THAT hard??

Comment by LeaVerou — February 27, 2009

I wanted to use the YUI uploader at http://www.uploadforme.com, but it’s of no use under Linux: no progress bar update and the browser’s UI blocked during transfer (I’m using firefox). I’ve been told this is a flash problem, which I tend to believe as other flash uploaders (like swfupload) have the same problem. As blocking the whole browser is worse than one-file-at-a-time-uploads, I’ve postponed the use of flash uploaders.

Raphaël

Comment by raphinou — February 27, 2009

This is already possible in Firefox 3. I’ll write up a simple proof of concept this weekend to show how it can be done using nothing more than JavaScript.

Comment by igstan — February 27, 2009

Just to be clear, it’s perfectly possible to upload multiple files simultaneously in most browsers, as demonstrated by a number of nice javascript-only upload widgets. What’s not possible is to allow the user to select multiple files in one go.

Whoever at Adobe was responsible for this change should be ashamed.

Kev: So yeah, I reckon the selectFiles() method is a security risk so we need to do something about that.
Dave: OK, I’ll change it so it displays an OK/Cancel warning to the user, a bit like the clipboard warning? Then the user can choose whether to allow it.
Kev: No, I wouldn’t bother with that if I were you, sounds too much like hard work.
Dave: Oh OK, I’ll just popup a message saying that this function has been disabled in the current version of Flash, so the user knows what’s happening.
Kev: To be honest, I wouldn’t bother with that either. Just stop it working, it’s good to keep people guessing.

The names have been changed to protect the no so innocent.

Comment by jeromew — February 27, 2009

@jeromew: I also have not heard any decent reasoning for why this “security” change had to happen to the flash FileReference logic. The result is that now you just overlay a flash movie that’s transparent or that looks exactly like the content you’re overlaying. In practice nothing has changed security-wise.

Comment by Joeri — February 27, 2009

The reason for the change in Flash Player is that we didn’t want banner ads, etc to be able to pop-up the file selection dialog without the user clicking on something. So this as well as a few other things (full screen, pop-ups, etc) are now required to be a user-initiated action. More details here:
http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html

This is really no different from how browsers dealt with the pop-up problem a while back. They required pop-ups to be triggered by user-initiated actions.

As a web user this is a very welcome change because it was bound to be abused if not fixed.

-James (Adobe)

Comment by jlward4th — February 27, 2009

@raphinou

I’ve been having the same issue on Linux. I’ve tried to create a simple reproducible test case so that I can file a bug but I haven’t been able to reproduce it with my own application. I’ll keep trying but if anyone else can create a reproducible test case then please file the bug:
http://bugs.adobe.com

And then email me the bug number. jaward at adobe dot com

-James

Comment by jlward4th — February 27, 2009

@jeromew: This is what I meant by “just to upload multiple files”. I should’ve written “just to select multiple files”.

Also, I wrote “should” instead of “shouldn’t”. D’oh!

I should really keep in mind that coffee goes first and commenting in blogs goes second – not the other way round. If I confuse the order this is what happens :PPP

Comment by LeaVerou — February 27, 2009

@jlward4th Thanks for replying, James, it’s good to hear from someone at Adobe about it. I can certainly understand why it was done, I just think it could have been patched in such a way so as to not silently break all the existing code out there that relied on it.

Saying that, I now reckon that my first post was a bit harsh – as a programmer I probably shouldn’t be throwing those kind of rocks anywhere near my glass house :)

@LeaVerou I’m with you when it comes to coffee. Some mornings I hit a catch-22 in that I need the coffee to function but I’m not functioning well enough to work the coffee machine :)

Comment by jeromew — February 27, 2009

Instead of using Flash one could also use a Java Applet. A signed applet can also get access to the system clipboard!

Our example of the possibilities can be found at http://www.activ8.at/homepage/en/a8dropzone.php

Info:

You can upload files by Drag & Drop or Copy & Click. You can also upload images from the system’s clipboard by clicking the dropzone which is especially usefull for screenshots! The applet converts any kind of image from the clipboard to PNG and then uploads it to the server. All uploads are performed in the background in an asynchronous manner. On the server side you simply handle the upload like you would handle any upload generated by a – so integration is easy.

This solution has successfully been integrated in various different web applications – users don’t seem to have a problem with it beeing a java applet at all (especially in closed community “intranet” applications!)

We have been looking for a decent solution to provide easy file uploads to our users but all solutions (flash, gears, regular old HTML, …) have huge limitations of different kinds.

Browsers (and HTML) definitly need to make file-uplads easier!

Comment by knoffhoff — February 27, 2009

The flash 10 security change (direct interaction with flash movie required to get a “file open” dialog, etc.) is logical and while it introduces a minor layout tweak/inconvenience for JS + Flash-based uploaders, they can still work – and a potential hole has been closed, also a good thing.
 
The YUI Uploader allows for the flash movie to be rendered either as a graphic button, or as a transparent block which can then be positioned on top of a regular HTML link. For Flickr’s uploadr, we used the latter technique when Flash 10 was released.

Comment by Schill — February 27, 2009

….you would handle any upload generated by a <input type=”file”>…..

Comment by knoffhoff — February 27, 2009

Leave a comment

You must be logged in to post a comment.