<Actionscript File Upload ⁄ >

File uploading's a common thing nowadays, from a forum, to a blog, or even you're personal website, it's really a very common task.

Usually we use html <form> to make such operation, we can even use Ajax, but in this snippet I'll give an example to file uploading, but with Flash, Actionscript 2.

Let's just build a simple class that gives you a few detailed informations about the file being uploaded.

In this snippet I'll only make a single file upload at once support, in the future I'll build a multiple-file upload.

Building a Class will allow us to re-use our code more often and in other projects, the class itself will do all the work, we'll only have to pass the correct values, so that everything will work fine.

If you already made/ worked in, a file upload using ajax you'll notice that in Actionscript things will work, more or less in the same, way. The communication/ transfer will be asynchronous. For this communication we'll use an Actionscript class named FileReference

Since Flash's a client-side language, we'll still need some server-side scripting, such as PHP (as equal in Ajax file-upload).

I "designed" a rather simple interface:

a Browse Button

an Upload Button

a textbox on which we'll display our filename and a few upload information

a textbox on which we'll show a numeric progress indicator (0 – 100%)

The class will allow us to create a progressing bar indicator too, but it'll build it automatically, as you'll see, later, in the code. Such tasks are optional, this is, you only use it as you care, besides this snippet being a simple upload class on which I tried to not overload the class, you can make some customizations.

Here's a screenshot of our interface:

As you'll also see we have a line of code in the previous screenshot, it'll include "Init.as", which will take care of the all process for us, if you don't write Actionscript

Here's a tip, try to code always in separate Actionscript file, it'll save you some time when you need to update

Here's a screenshot before start uploading:

FileUpload.as, this is our main Class, it'll communicate with the server and show the user information about file being uploaded. You can use it in another completely different project or layout, as long as you specify the valid arguments, you can also freely customize it to your own needs.

Init.as, this is where we'll specify our settings to FileUpload class. The code's throughout self explanatory. In here you'll specify the settings such as the the upload script; your buttons; user messages; file extensions allowed and its description; progress bar settings, etc, etc.
Since there are many arguments, we'll use an Object to declare all our settings.

As I said before, we'll still have to use a server-side script also, because Flash's only a client-side scripting language. Besides uploading the file to the server, you can also send some information, just like a query string, or some fields in our regular html <form> tag. In our settings Object we have a parameter called "_script_upload_params", here's where you'll specify all the information that you want to send along with the file.

//used when loading as external swf, it's not strictly necessary,

//however it could save you a few headaches with paths ^_^''

_root._lockroot = true;

var

//cache our current "this"

$self = this,

//save path to form, in this example it's the same, however it could be different,

//for instance, our form was inside a MovieClip, in this case it would be

//$path = $self.myMovieClipName;

$path = $self,

settings = {

//server script that will upload the file(s)

_script_upload: "upload.php",

//query string parameters (optional)

//use this if you want to send information to the server

_script_upload_params: {

dummy_x: "lorem",

dummy_y: "ipsum",

id: "123456"

},

//user messages (optional)

_messages: {

_file_upload_success: "File uploaded succefully",

_file_upload_error: "Error while transferring file",

_file_selected: "File selected",

_file_transferring: "File being transferred"

},

//allowed extensions

_file_type_extensions: "*.mp3; *.wav",

//allowed extensions description

_file_type_description: "Files MP3 Files (*.mp3; *.wav)",

//upload button

_btn_upload: $path["btn_upload"],

//browse button

_btn_browse: $path["btn_browse"],

//textbox that will show the informations to the user (optional)

_txt_console: $path["txt_console"],

//textbox that will show the % progress (optional)

_txt_progress: $path["txt_progress"],

//progress bar (optional), customize it at your own needs

_progress_bar: {

_width: $path["txt_progress"]._width,

_height: $path["txt_progress"]._height,

_x: $path["txt_progress"]._x + 4,

_y: $path["txt_progress"]._y + 30,

_bg_color: 0xD15600,

_canvas_color: 0xFFFFBD,

_border_color: 0x3F4C6B,

_border_width: 5,

_where: $path

}

},

//create FileUpload object

file_uploader = new FileUpload(settings);

//initialize our FileUploader and prepare all event handlers

file_uploader.Init();

upload.php, this is our php file, you can use any server-side language.

<?php

//these variables are the ones specified at "settings._script_upload_params", in Init.as

//as already stated, these variables are optional, use them in case you want to