Uploading Multiple Selectable Files with Flash9 and AS3

Uploading on the internet is pretty arcane. Either you have to individually select each file with the browse file input, install some activex control or use java to select multiple files. It always ends up being a tedious action.

But Flash is the new champ in file upload for the web, as with video, Flash just makes it simple. The FileReferenceList class and its browse method pop up the multiple file select box where the user can hold CTRL or SHIFT to select multiple files and watch them all drop in rather than having to painstakingly select them one by one and not having to install an unknown activex or java applet.

Here’s script to upload multiple files (or get the multiple file select box).

var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/upload/");
    var file:FileReference;
    var files:FileReferenceList = FileReferenceList(event.target);
    var selectedFileArray:Array = files.fileList;
    for (var i:uint = 0; i < selectedFileArray.length; i++)
    {
        file = FileReference(selectedFileArray[i]);
        file.addEventListener(Event.COMPLETE, completeHandler);
        try
        {
            file.upload(request);
        }
        catch (error:Error)
        {
            trace("Unable to upload files.");
        }
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded";);
}

[source]

SWFUpload is based on this and is a nice AJAX based script that uses ExternalInterface in AS3 to pass the javascript presentation to the flash uploader.

The multiple file select, checking the file size before uploading and the ExternalInterface access for Actionscript to talk to Javascript makes Flash the best option for online file uploads for the web yet.

  • Pingback: FLASH / AS3 - Upload Multiple Selectable Files « Flash Enabled - Get Ready With Flash…

  • http://www.imperez.com Rich

    Ah this is great to hear. I worked on a past project and one of the concerns we had was multiple file uploads in flash. This would’ve been good to know months ago. Thanks for the info.

  • http://drawk.wordpress.com/ drawk

    Yeh it is no drag-and-drop like XUpload (activeX) or some java applets that make this easier, but it is much more usable and way better than plain file inputs. Lots of large sites like photobucket still have the barrage of file inputs, I wonder hw long before most people are using this. However it also presents a slight performance change for large sites, rather than files intermittently they might get many more files at once but the user experience is worth it. If you had to upload 100+ files this literally can save hours.

  • Pingback: Top Posts « WordPress.com

  • eXtraOrdinary

    Hi,

    If I have other fields that I want to submit together with the files selected by SWFUpload, how do I do that?

    Or is this supported by SWFUpload?

    Thanks.

  • http://drawk.wordpress.com/ drawk

    Hey eXtraOrdinary,

    You can pass any data in AS3 itself by attaching it to the request .data. You might have to modify SWFUpload if it does not support this.

    //var _vars:URLVariables = // get URL variables

    var request:URLRequest = new URLRequest(url);
    var loader:URLLoader = new URLLoader();
    loader.dataFormat = URLLoaderDataFormat.VARIABLES;
    request.data = _vars;
    request.method = URLRequestMethod.POST;

    For SWFUpload specifically these guys are dealing with the same issue. It seems you can pass a callback with the params and then append them to request.data in the AS3 script.

    http://swfupload.mammon.se/forum/viewtopic.php?pid=1097

  • Mick

    Is it possible to resize the image before it is uploaded with Flash. I have users that need to upload photos to our site, but the photos don’t need to be more than 650px wide/high at a max. Is that possible?

  • http://drawk.wordpress.com/ drawk

    I haven’t tried it but you could size down a sprite and save it out as a bitmap to pass to a service to save the actual file.

    public static function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
    {
    var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
    bitmapData.draw(sprite);
    return new Bitmap(bitmapData, “auto”, smoothing);
    }

  • Mick

    I’ve never developed anything in ActionScript before, but I’ve downloaded the SWFUpload source which is ActionScript2. I’ve changed that to ActionScript 3 in FlashDevelop since it appears that Sprite’s didn’t come along until version 3 (is that right?).

    How do I go from the file reference that I have to a Sprite back to a file reference that can be uploaded?

    Also, you mentioned passing the bitmap to a service, were you just referring to the file.upload(yourscriptfilehere) method or were you talking about something different.

    Sorry for all the questions and my lack of knowledge to even know where to start on this!

  • http://drawk.wordpress.com/ drawk

    Correct Sprites are new in AS3 as a streamlined object that might not need to be a movieclip (usually images, symbols etc)

    When the user uploads a file to the file reference you have access to the data. You can send that off to a service in php or .net etc that saves it out to a file or you can upload it in a temprorary space (usually involving server side code here) that can then be sized and or cropped etc. Then you can export out that sprite into bitmap data to be saved for good.

    It is a bit beyond the scope here and I am working on a demo of this (mini photoshop in flash) but it is not going to be done for at least 2 months.

    I would check out this which may help you to save out the file or at least see how they grab that data.
    http://www.quasimondo.com/archives/000572.php

  • Didier

    So I tried your code and it gives me a: “Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error.”
    I’m not sure why, if you could tip me on something.
    I’m also wondering, what kind of server setup you need so flash has permissions to write to a folder?

  • http://drawk.wordpress.com/ drawk

    Hey Didier,

    Usualy when you get an IOError there is an error on the server you are trying to upload to or the path does not exist (you have to run this in a website rather than local or file system).

    It posts as POST with the file attachments. .NET, PHP etc have libs to grab this you just need to setup a page or url that can accept the files. I have more complete tutorials on this including .NET and PHP samples but they need to be cleaned up and writing a tutorial for it. Unfortunately until I move this blog to my main domain I dont’ have alot of that setup just yet.

  • Jonathan

    I tried to use this code and others, and it seems that I dont have any errors, the trace function even says that the file is uploaded, but when I take a look at the directory, the file uploaded isnt inside it. How do this things really work? Can you further explain it?

  • http://drawk.wordpress.com/ drawk

    Hey Jonathan,

    Sry this is just the client side flash upload. You have to have a server side PHP, ASP.NET, JSP, etc file to catch it on the server to save it. Flash can only get the files and post them in the response and then from there you need to have a server side script to catch the data and save it to a file on the server.

  • Jonathan

    Hey drawk, Yeah I need to upload it in a server. But even if I try do use that code locally, I cant even upload an image. And by the way,

    var request:URLRequest = new URLRequest(“http://www.[yourdomain].com/upload/”);

    what do I exactly need to put on “yourdomain”? is it the upload.php file? or should I leave it the way it was? Im sorry but I cant make it work properly I guess.

  • http://drawk.wordpress.com/ drawk

    Hey Jonathan,

    Yes sry this just shows the flash side. the [your domain] would be a script (php, .aspx, ruby, web server side tech basically) to catch the files posted and then save them. In .NET for instance this comes in on the Request.Files object array as binary that you just save. The great thing about this flash upload method for the client side is it checks file size before you upload (you can put checks there) and you can alto upload and select multiple files. This was only possible with Java applets or ACtiveX controls and activex and java are long but dead in the browser. Java might be back but it is all Flash for uploads with this functionality.

    One place you might want to look is SWFUpload .

    http://swfupload.mammon.se/

  • http://drawk.wordpress.com/ drawk

    Here is a full server side code included sample for Flash8 that uses the FileReference. To make it mulitple file just use FileReferenceList.

    http://www.flash-db.com/Tutorials/upload/

  • http://red5flashserver.blogspot.com Sunil Gupta

    It’s good to see here this post, We have already done with multiple file uploadings with PHP on the server side.

  • http://market03.ru Чилавек Магазин

    Мне очень нравится

  • Sundev

    That try … catch exception statement isn’t the way to handle errors. That is why that one guy was getting IO Errors. There is a specific IOErrorEvent type that is dispatched when an error occurs. It would be better if the code had a listener for that error event. I don’t think that try.. catch will ever catch anything unless your file or request var wasn’t set.