File uploading is one of the many exciting new features announced in Flash 8. Using this new functionality you can upload just as you would using an FTP client without ever leaving Flash!

With the prior version of Flash the only way to do such a thing was to create a hidden file form on an HTML page and use Javascript to prompt the file browser. Not only was this method slow, but it only worked in Internet Explorer.


This article is going to be broken into 2 processes, asset creation, and form backend. We’re going to start by creating all the assets the user needs to upload a file. Then we’re going to give life to our assets in form backend, which will cover the coding used to upload files.

Asset Creation
------------------------------------

Every application needs certain assets to work alongside its backend. Imagine an uploader without a browse button! That wouldn’t work very well would it?

If you’d like to speedup this process you can download it here as an easy to follow video.

Let’s start by creating the text field that will be used to display the filename of the file selected. Select the text tool (T) and create a new text field with the instance name of “file_name”. Be sure to select the “Dynamic Text” text field type from the left hand side dropdown menu in the Properties panel.

Next create an empty text field and give it the instance name of “file_status”. This text field’s value will be changed as the uploading process progresses to inform the user what’s going on. Once again, don’t forget to set this text fields type to Dynamic Text.

That covers the text fields, now let’s draw an upload button which will be used to prompt the file browser when pressed.
Select the Rectangle Tool (R) and draw a rectangle. Now grab the text tool (T) and create a static text field for a label above the rectangle, set this text field’s value to “Upload”. Give this button an instance name of “file_submit".

Form Backend
------------------------------------

First thing we need to do is import the FileReference class to allow us to access its functions.

import flash.net.FileReference; 

The FileReference events we will be using (although there are many more available) are listed as follows:

• onSelect
  Executes when a file has been selected from the file browser.
• onOpen
  Executes when uploading has begun
• onComplete
  Executes when the uploading process has finished

Next we need to create a FileReference object and listener to handle events.
Each FileReference object represents one file on the user's computer and has properties that contain information about the file's size, name, type, modification date, creation date, and creator type (the creator type property is limited to Macintosh only).

var uploader:FileReference = new FileReference();
var listener:Object = new Object(); 

Here comes the part not possible in Flash MX 2004, prompting the file browser. How else would you find the file you want to upload? This can be accomplished using the FileReference browse() method.
Not only can you prompt the file browser but you can also limit the types of files selectable. In our case I’m going to limit the user to image type files that include JPEG, GIF, and PNG. This method will be placed within an onRelease event set to execute when the submit button we created earlier has been clicked.

form_submit.onRelease = function() {
    uploader.browse([{description: "Image Files", extension: "*.jpg;*.gif;*.png"}]);
} 

After the user selects a file from his/her computer the file will be uploaded using the FileReference upload() method which will be placed inside the onSelect event. This method only requires 1 parameter, which is the URL to your server-side uploading script. In this article we will be using PHP as our server-side language. Remember that later on in this article when we create our PHP script the following URL will need to be updated to the full path of the script on your server.

listener.onSelect = function() {
    file.upload("http://www.mydomain.com/upload.php");
} 

Don’t forget, we need to keep the user informed as to what’s going on with his/her upload. It would be helpful to know when the upload has begun; this can easily be accomplished by using the onOpen event.

listener.onOpen = function() {
    status_txt.text = "Uploading has begun”;
} 

Most importantly we need to alert the user when the upload has successfully been completed. As mentioned above onComplete executes when the upload has complete, this is the event we will be using. Later on in this article I’ll show you how to display the image uploaded after it’s been uploaded, but for now we’re just going to set the value of our status text field.

listener.onComplete = function() {
    status_txt.text = "Your file has been uploaded!";
} 

You’ve probably noticed how we set each method to “listener”. Remember when I said listener would be handling all the events when we first created it? Now to get all our events to execute property we need to set listener as the FileReference object’s listener.

uploader.addListener(listener); 

If you’re not familiar with listeners be sure to read Listeners and AsBroadcaster by Senocular: http://www.senocular.com/flash/tutor...asbroadcaster/

That covers the Actionscript part of our uploader! Onto the server-side script I mentioned above. Be sure you change the upload URL of the onSelect event to the URL of your server-side script.

We don’t want to allow uploading of files with no size, so the first thing to do is check if the files size is greated than 0 Kb.

PHP Code:

if($_FILES['Filedata']['size'] > 0) { 


To upload a file you must know the absolute path of where you want the file to be placed. You can determine this path automatically by using the dirname PHP function.

PHP Code:

$path = dirname(__FILE__) . “/” . $_FILES['Filedata']['name']; 


After our file has successfully uploaded we need to move it from its temporary directory to the absolute path. We’re going to use the move_uploaded_file function to make this directory change.

PHP Code:

move_uploaded_file($_FILES['Filedata']['tmp_name'], $path); 


Now just close up the first “if” statement using an end bracket “}” and your done!

Here’s the whole block of code:

PHP Code:

<?php
if($_FILES['Filedata']['size'] > 0) {
    $path = dirname(__FILE__) . "/" . $_FILES['Filedata']['name'];
    move_uploaded_file($_FILES['Filedata']['tmp_name'], $path);
}
?>

------------------------------------

Phew, that’s it! If everything went well you should now be able to browse for files on your computer and upload them without leaving Flash.

If you have any questions feel free to send me an email to julian@neverrain.net and I’ll get back to you as soon as possible.

Download Completed Example | Download Article in PDF

Julian Wilson
neverrain.net - securestores.com

------------------------------------

Notes

Keep in mind there’s many more ways you can expand on this tutorial using the FileReference and FileReferenceList classes as well as your own functions.

One thing last thing I’d like to highlight on is the ability to display the image after it’s been uploaded. Making this happen is a simply a matter of using the MovieClipLoader or loadMovie clip just like you’d load any other image.

Here’s an example of the code I used to accomplish this. Note: In this block of code I used a height ratio instead of an exact value, meaning you will need to create a Mask MovieClip in the library with the linkage ID “mask” and set its size to the maximum width and height you’d like to limit images to be displayed at.

MovieClip.prototype.displayImage = function(path:String) {
    var target = this;
    var mcl = new MovieClipLoader();
    mcl.onLoadInit = function() {
        target._width = limit_w;
        target._height = (target._width/limit_w)*limit_w;
        _this.attachMovie("mask","mask",this.getNextHighestDepth(),{_x: target._x, _y: target._y});
        target.setMask(_this.mask);
        
        target.onRelease = function() {
            getURL(path,"_blank");
        }
    }
    mcl.loadClip(path,target);
} 

Click here to checkout my experimental uploader that makes use of the above code.

Chief "whoa that was hella complicated" Flash Guy
Neverrain - www.neverrain.net

[G4XTR]

Thanks Neverrain. Very interesting tutorial

[Trance]

Wicked, Nice job - this will come in handy sometime.

[Artofacks1]

nice! great job bud.

[DavidNetk]

Thank you neverrain. Cool thing to include a video

[Renjamin]

[seth88]

Excellent, thanks for sharing

[minlab]

Neverrain, thanks for sharing the code. it looks great.

One question here, if I don't install the PHP or ASP services on my server. Is there any way to run the code?

It seems the flash just pass the parm. to the PHP or ASP. ( flash doesn't have ability to upload file by itself )

Cheers man

[natronp]

i have yet to get this or any other tute on using fileReference to work (including the example under flash 8 help). it seems i'm not alone in that after doing some sleuthing. also you don't reference your dyn. text boxes correctly in this tutorial. not a big deal i guess. has anyone else gotten this to work and actually upload a file? i wonder if there are some security issues.

[minlab]

Dear neverrain, I found a *bug* of fileReference in flash 8.

I added more actions to check the file size in onOpen section. however, it is tricky.

If you try to select a file over 1MB file, it tells you "Failed to upload file over 1MB."(works great) BUT if you try to select the same file again, it seems skip the checking part and can upload -_-

Does anybody want to try? I tried to move the checking part into onSelect section. still doesn't work.

listener.onOpen = function(file:FileReference) {
    file_status.text = "Checking policy...";
    // Check File Size, If file size is over 1MB, then stop
    var fileSize:Number = int(file.size/1024);
    trace(fileSize);
    if (fileSize>=1024) {
        //trace(adminRights.text);
        file_status.text = "Failed to upload file over 1MB.";
        uploader.removeListener(listener);
        _root.fileSubmit.enabled = true;
    }
}; 

file_submit.onRelease = function() {
    uploader.addListener(listener);
    uploader.browse([{description:"Supported Files", extension:"*.jpg;*.gif;*.png"}]);
}; 

[minlab]

no one wants discuss this isuess?

[petremetre]

Excellent!!!!!!!!

[escapelab]

Thanks Neverrain! Does anyone know if it it possible to use fileReference in AS1? It says so in the documentation but doesn't give much help on how to do it.

[mgregor13]

Can you submit metadata in the same request?

I would like to send up some description information with the images I upload.

[evanezzcen]

I can make it work... the file upload... evrything was fine but it says that the file was upload and then never appear in the ftp server... do you know why? thnx for help

[Julian]

Originally posted by evanezzcen
I can make it work... the file upload... evrything was fine but it says that the file was upload and then never appear in the ftp server... do you know why? thnx for help

Make sure you've changed the folder's CHMOD to 777 (full read-write permission) and that the path you specify in upload.php (if you've changed it from the original code) is an actual directory.

[pisosse]

ok this might sound stupid but how about the other way around.. downloading?

[chicharo]

is there a way in which i can upload multiple files at the same time ???
hope you can help me

thanks

[InfinityI]

Originally posted by chicharo
is there a way in which i can upload multiple files at the same time ???
hope you can help me

thanks

Yes, checkout the FileReferenceList class in the flash help documents.

[David_King]

Nice tute, will have a right good butchers later and comment again.

[wildcats]

It doesnt work on mozilla

[InfinityI]

This example doesnt seem to, but the flash FileReference class is compatible with all modern browsers. Look it up in the flash help documents

[measures]

I have worked my way through this tutorial, but for some reason it seems to be getting stuck when uploading the file. This happens using both firefox and ie. It does the same thing when using neverrains example as well. Any ides anyone...

[InfinityI]

That could be a server issue, i found flash uploading didnt work correctly with my original server setup, i mentioned it to my hosting company and they fixed it and it works great now.

[measures]

Yeah I checked with my hosting company and they didn't see a problem, the weird thing is that I can't get neverrains demo
http://www.neverrain.net/experiments/flashupload/
to upload anything either. Perhaps he has switched the chmod off to stop
his server getting full!
Can you remember what your hosting company had to change to get it working? Perhaps if I can give them a suggestion it may help.
Thanks.

[khinvox]

duh, this is great man!!! after 3 years of rest... at last i'm back here and grabbed me some new tutorials on flash-FTP uploading!!

[Markosef]

Is there some way to make progress bar when uploading?

[David_King]

onProgress is your friend for this one

[Markosef]

yes i figured it out meanwhile, no problem, was just layze yesterday :-)

[Silvestro]

I have some problem using the script.
The manual says you should put a parameter in the function declaration, like file:FileReference.
And, I'm wondering how can I debug the script, since the data posting is transparent. The script doesn't work locally, but I can't manage to find the bug. If I write

print_r ($_FILES);

the php script returns nothing.

[jjokes]

Hello

The download http://www.securestores.com/nvr/asset_creation.zip

seems to be offline. Can I get this file from somewhere else?

[barnobi]

so can anyone give me a tip on how I might use this to load a local image into the swf at runtime for display??

[Silver_S]

Hey guys, good tut, I have a question.......
what if I want to have a flash form with an image send file......
I don't want to upload the file once is selected, I want to the user fill the form, select the image and then upload the data and the image.
Is this possible?
Somebody has a tut about that?

[Synergetic]

Originally posted by Silver_S
Hey guys, good tut, I have a question.......
what if I want to have a flash form with an image send file......
I don't want to upload the file once is selected, I want to the user fill the form, select the image and then upload the data and the image.
Is this possible?
Somebody has a tut about that?

+1
It would be nice to be able to do this.