Het Bijstere Spoor

This has been covered on other sites even when FP10 was still beta, but sadly I've just ran into this one right now.

Flash Player 10 no longer allows uploads to be invoked from within javascript, and requires an actual mouseclick or buttonpress event from within flash. For the people using tools like swfupload or the (old version of-) YUI uploader, this is bad news, as these tools will simply break.

The fix was made as a security measure against phishing-type attacks, and this has been the behaviour in browsers for as long as I can remember, so if its any consolidation.. it's a good thing really.

The Flash Blog mentions:

Similarly, another possibility is to overlay a transparent SWF button over the HTML content so that again, the user clicking happens in Flash and not in HTML.

Which is actually kind of funny, in a time where 'Clickjacking' is big news, and I would also strongly discourage such attempts to make sure you have a solution that still works in 2009. I'd like to see an example of this, just to test if noscript's clickjacking protection works.

The only real options out there are to simply switch back to good old html uploaders, or do your uploader interface entirely in flash. We'll probably be implementing the former in the short term to work on the latter down the road. The updated version of the YUI uploader also takes the flash approach.

We have had a whole bunch of issues with the Flash 8 uploader on OS/X in the past. Now its completely broken on leopard, but before we weren't able to do multi-file uploads because the 'onComplete' event wasn't triggered from within flash.

We've been using a (modified) version of SWFUpload and also our Flash applications have had this issue..

Today I read on The Joy of Flex-blog that there's actually a really simple solution to this problem. Have your PHP (or other server-side) simply return some data. Our upload-endpoint normally always returned nothing at all, because it seemed unnecessary, but returning a small body in your HTTP response fixes the issue!

As you can tell, I'm excited.

FITC presentation videos are online, including mine. Its the first time I actually watch it. It's a bit creepy to see myself, but I guess it went fine. I couldn't get a mic hooked up at the time, so the audio quality is a bit crappy.

I also notice that I made a bunch of mistakes related to embedding swf's, which I only found out later.

A funny fact: The girl sitting right in the front (and leaves after a while) is now my girlfriend. So we actually have video footage of when we first met :).

Update: added some of the source code used.

As promised, I'll put up some links from last nights presentation.. If you attended, I hope I got the message across, and if you're hungry for more, be sure to check out fitc, where I will do a 1 hour version of the presentation..

• Flowplayer - FlowPlayer is an open source, skinnable, very powerful flash video player..
• FFMpeg - To my opinion, the best tool out there to convert your video to flv.
  
  Binaries for OS/X are included in FFMpegX, binaries for windows can be found in Riva FLV encoder. Most Linux distributions also have a pre-compiled ffmpeg package..
  
  Remember though! Only use those for testing purposes, if you want support and support for for example WMV3, you really should compile your own..
• SWFUpload - An open source library to leverage Flash 8's multi-file upload from javascript.
• On2 Flix - An expensive, commercially backed FLV encoder.. If using the latest flash video codec is important to you, look at this product.

And there's even a small piece of the presentation recorded....

handling uploads..

Note that these scripts all assume an .mpg extension..

<?php
 
    foreach($_FILES as $file) {
 
        $newFileName = 'uploads/original.mpg'; 
        move_uploaded_file($file['tmp_name'],$newFileName);
 
    }
 
?>

Simple conversion

<?php
 
    $ffmpegPath = '/Applications/ffmpegX.app/Contents/Resources/ffmpeg';
    $input = 'uploads/original.mpg';
    $output = 'uploads/converted.flv';
    $result = `$ffmpegPath -y -i $input -ar 44100 $output 2> /tmp/ffmpeg_log`;
 
?>

Slightly more advanced..

Adjusts the bitrate, height and width, and also generates a thumbnail.

<?php
 
    $ffmpegPath = '/Applications/ffmpegX.app/Contents/Resources/ffmpeg';
    $input = 'uploads/original.mpg';
    $output = 'uploads/converted.flv';
 
    $output = 'uploads/thumb.jpg';
    $result = `$ffmpegPath -y -i $input -an -s 320x240  -f mjpeg -ss 0:2:0 -t 0:0:0.001 $output 2> /tmp/ffmpeg_log`;
 
    $output = 'uploads/converted.flv';
    $result = `$ffmpegPath -y -i $input -ar 44100 -b 320 -s 320x240 -ab 128 -acodec mp3 $output 2> /tmp/ffmpeg_log`;
 
?>

I heard a few times in the past about SWFUpload and recently I decided to try it out..

Basically SWFUpload is a 0x0 pixel swf that allows you to leverage Flash 8's upload mechanism through html/javascript. Not only can you let your users select multiple files to upload, it also allows you to catch the progress nicely, without a combination of nasty hacks with javascript, hidden frames and server-side callbacks.. It it distributed under the very permissive MIT license.

However, the integration went pretty bad.. SWFUpload is a very complete package and includes a big javascript wrapper, a bunch of examples and SWFObject, which is used to embed the object in the html using javascript and examples. For some reason it didn't work for me all, I assume there was probably some collision with my existing javascript.. and I don't really like SWFObject, as it has to my opinion overkill written all over it..

So, I peaked into the javascript, only to find out that just using the swf you have a lot of power already, you can specify your javascript callback functions straight from though the flashvars.. Neat! The flashvars look something like this:

<param name="FlashVars" value="uploadBackend=%2Fservices%2Fupload&amp;uploadStartCallback=Uploader.onStart&amp;uploadProgressCallback=Uploader.onProgress&amp;uploadCompleteCallback=Uploader.onComplete&amp;uploadCancelCallback=Uploader.onCancel&amp;uploadErrorCallback=Uploader.onError&amp;allowedFiletypes=%2A.gif%3B%2A.jpg%3B%2A.mp3&amp;allowedFilesize=204800&amp;uploadQueueCompleteCallback=Uploader.onQueueComplete" />

Very easy to use.. The only thing I really miss is the fact that selecting files and uploading is a combined step.. Not really handy in terms of usability..

My feature requests:

1. Have a separate method for selecting files before upload.
2. Allow the ability to replace the file upload list, but also append to the list.
3. Have the callbacks return index numbers for the files.. Right now the only unique property you get is the filename, and there could be situations where 2 files with the same name are uploaded (rare, but still..).
4. Implement a method for canceling the upload progress.
5. Implement a method to remove a file from the upload queue.

The other problem I ran into using flash uploads are http cookie bugs.. I covered that in my last post.