In this post I will include all the code that I used to make this Flash file upload application work and I want you to keep in mind that I am an amateur Flash developer with zero experience in Flash, and that the code is essentially a compilation of solutions to various problems that I found via Google.

First, I began by importing some classes for Flash that I used within the code. This probably isn’t all that I needed to import, but this is what I imported that worked.

import flash.net.FileReferenceList;
import flash.net.FileReference;
import fl.containers.ScrollPane;

After the import, I created my list of variables, and pre-assigned some with their values.

var fileList:FileReferenceList = new FileReferenceList();
var filefilters:Array;
var i:Number = 0;
var uploaderStatus:Boolean = false;
var uploadQueue:Number = 0;
var selectedFileArray:Array = new Array();
var uploadURL:URLRequest = new URLRequest();
var variables:URLVariables = new URLVariables();
uploadURL.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f : 'process.php';
uploadURL.method = URLRequestMethod.POST;
var scrollContent:MovieClip = new MovieClip();
this.addChild(scrollContent); //add the scrollContent to the stage
uploader_mc.scrollPane.source = scrollContent;
var theItemList:Object = Object(uploader_mc.scrollPane.content);
var theAlbumList:Object = Object(uploader_mc.albumSelect);
var theMessageBox:Object = Object(uploader_mc.messageText);

var albumString:URLRequest = new URLRequest();
albumString.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.o : 'albums.php';
var albumLoader:URLLoader = new URLLoader(albumString);
albumLoader.addEventListener(Event.COMPLETE, populateAlbumsList);

Now I want to delve into the meat of the Actionscript.  One-by-one I will list the functions as they appear in my Actionscript 3.0 file and explain what they’re all about.

function setup(fileList:FileReferenceList) {
    fileList.addEventListener(Event.SELECT, selectHandler);
    uploader_mc.upload_btn.enabled = false;
}
setup(fileList);

setup() is passed the fileList variable and adds the needed event listeners to begin the application. Here is where you’d pass the even listeners for when the user begins browsing for files or for other things such as error handling (IO errors), when the entire upload completes (if you’re uploading through the FileReferenceList class directly), etc. I did not include any of that here as this is a BETA application and is not yet complete. To continue, this function also disables the upload button as we don’t want the user to be able to fire the upload event if no files have been selected.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

uploader_mc.select_btn.addEventListener(MouseEvent.CLICK, browseFiles);
function browseFiles(e:MouseEvent):void {
    theMessageBox.text = "";
    filefilters = [ new FileFilter('Images *.jpg; *.jpeg; *.gif; *.png', '*.jpg;*.jpeg;*.gif;*.png') ];
    fileList.browse(filefilters);
}

In the above code snippet, we are adding an event listener to the select button and then immediately defining the function for the event listener – browseFiles(). This function is passed a MouseEvent and makes sure the message box (theMessageBox) is empty, adds the file filters to the fileFilters array and then launches the browse dialogue box for fileList. The user at this point would be browsing for the images they’d like to upload.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

uploader_mc.upload_btn.addEventListener(MouseEvent.CLICK, uploadFiles);
function uploadFiles(e:MouseEvent):void {
    uploadSingleFile(uploadQueue);
}

Above we’re adding an event listener to the upload button and then immediately defining the function for the event listener – uploadFiles(). This function simply calls the uploadSingleFile function and to that, passes the value of the variable uploadQueue.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

uploader_mc.cancel_btn.addEventListener(MouseEvent.CLICK, cancelUpload);
function cancelUpload(e:MouseEvent):void {
    var file:FileReference = FileReference(selectedFileArray[uploadQueue]);
    file.cancel();
    reset();
}

Here we are setting the event listener for the cancel button and defining the corresponding function – cancelUpload(). This function is passed a MouseEvent and gets the current file upload in progress and sets the variable file to that, then cancels that upload. After the cancel, it calls the reset function which prepares the upload application to re-browse for files and begin a new upload.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

function itemComplete(e:Event):void {
    var file:FileReference = FileReference(e.target);
    file.removeEventListener(Event.COMPLETE, itemComplete);
    file.removeEventListener(IOErrorEvent.IO_ERROR, ioError);
    theItemList.removeChildAt(0);
    uploadQueue++;
    for(x = uploadQueue; x < selectedFileArray.length; x++) {
        theItemList.getChildByName("listItem"+x).y -= 85;
        uploader_mc.scrollPane.update();
    }
    uploadSingleFile(uploadQueue);
}

itemComplete() is called every time a queued file has completed uploading. It begins by getting the FileReference information from the object that called the function, and setting it to the variable file. It then removes the event listeners which were on the object and removes the object from the list of files to download. It then increases uploadQueue by one and then iterates through all items still in the list to be uploaded and alters their position in the list (moves them up to fill the space of the removed item) and updates the list to make sure the scrollbar is current. After which, it calls uploadSingleFile, passing the new value of uploadQueue to begin uploading the next file in queue.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

function uploadSingleFile(index:Number):void {
    theMessageBox.text = "";
    try {
        variables.album = uploader_mc.albumSelect.selectedItem.data;
        if(index < selectedFileArray.length){
            var file:FileReference = FileReference(selectedFileArray[index]);
            file.addEventListener(Event.COMPLETE, itemComplete);
            try {
                uploaderStatus = true;
                uploadURL.data = variables;
                file.upload(uploadURL);
                updateButtons();
            } catch (error:Error) {
                theMessageBox.text = "Problems uploading file: " + file.name;
            }
        } else {
            reset();
        }
    } catch(Error:TypeError) {
        theMessageBox.text = "Please select an album first!";
    }
}

uploadSingleFile() is the function in which most of the magic happens – where the files are uploaded. It is passed a number to begin, and makes sure that the message box has no data displayed. It then tries to set an album value of the selected album in the drop-down list to the variables variable. If the user has not selected an album from the drop-down list, this fails and the catch sets the message box to display an error message informing the user to select an album first. Assuming the user has selected an album, and the first line within the try statement succeeds, it proceeds to see if the number passed to the uploadSingleFile function is not larger than the length of selectedFileArray – which if it is there are no more files to be uploaded, and the else section of the if/else block resets the uploader so the user may upload more files. If the index is smaller than the length of selectedFileArray then that file needs to be uploaded. It grabs the corresponding FileReference from the selectedFileArray and sets it to the file variable. Then it adds complete and IO error event listeners. It then attempts to set the uploaderStatus and uploadURL.data variables, upload the file to uploadURL, and last updates the buttons to reflect the file upload status. If any of that fails it sets the message box to display an error informing the user of which file had a problem.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

function selectHandler(e:Event):void {
    for each(var file:FileReference in fileList.fileList) {
        selectedFileArray.push(file);
        createListItem(file);
        uploader_mc.upload_btn.enabled = true;
    }
}

selectHandler() is passed an event and the function iterates through all files selected through the dialogue box lanched by clicking the select button and for each one adds it to the selectedFileArray, adds the file to the list of files to be downloaded (the list the user sees), and sets the upload button to be clickable.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

function createListItem(file:FileReference):void {
    var itemMC:listItem = new listItem();
    itemMC.name = "listItem" + i;
    itemMC.y += itemMC.height*i + 1;
    itemMC.x = 8;
    itemMC.fileName.text = file.name;
    itemMC.fileSize.text = sizeAsText(file.size);
    itemMC.progressBar.source = file;
    theItemList.addChild(itemMC);
    i++;

    uploader_mc.scrollPane.update();
}

createListItem() receives a FileReference object, and is used to add the visual representations of the files queued for upload to the upload list that the use sees.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

function sizeAsText(num):String {
    num = num / 1024;
    if(num < 1024) {
        num = String(Math.floor(num)) + " KBs";
    } else {
        if(num / 1024 < 1024) {
            num = String(Math.floor(num / 1024)) + " MBs";
        } else if (num / 1024 / 1024 < 1024)  {
            num = String(Math.floor(num / 1024 / 1024)) + " GBs";
        }
    }
    return num;
}

function reset() {
    //Set the uploading status
    uploaderStatus = false;
    //Reset counters
    i = 0;
    uploadQueue = 0;
    //Reset filelist
    selectedFileArray.length = 0;
    //Remove any remaining items in list
    while(theItemList.numChildren > 0) {
        theItemList.removeChildAt(0);
    }
    //Make sure the scrollPane's scrollbar reflects current state
    uploader_mc.scrollPane.update();
    //Update the buttons
    uploader_mc.albumSelect.selectedIndex = -1;
    updateButtons();
}

function updateButtons() {
    if(uploaderStatus) {
        //Select Button
        uploader_mc.select_btn.enabled = false;
        //Upload Button
        uploader_mc.upload_btn.enabled = false;
        uploader_mc.upload_btn.visible = false;
        //Cancel Button
        uploader_mc.cancel_btn.enabled = true;
        uploader_mc.cancel_btn.visible = true;
        //Album List
        theAlbumList.enabled = false;
    } else {
        //Select Button
        uploader_mc.select_btn.enabled = true;
        //Upload Button
        uploader_mc.upload_btn.enabled = false;
        uploader_mc.upload_btn.visible = true;
        //Cancel Button
        uploader_mc.cancel_btn.enabled = false;
        uploader_mc.cancel_btn.visible = false;
        //Album List
        theAlbumList.enabled = true;
    }
}

function populateAlbumsList(event:Event):void{
    var xDoc:XMLDocument = new XMLDocument();
    xDoc.ignoreWhite = true;
    var albumsXML:XML = XML(albumLoader.data);
    xDoc.parseXML(albumsXML.toXMLString());
    var albums = xDoc.childNodes[0].childNodes;
    for(var a=0; a<albums.length; a++) {
        uploader_mc.albumSelect.addItem( {label:albums[a].attributes.label, data:albums[a].attributes.data} );
    }
    albumLoader.removeEventListener(Event.COMPLETE, populateAlbumsList);
}

The above four functions I feel need little explanation, so I’ve grouped them together.
sizeAsText() receives a number, the number should represent the size of a file in bytes it then formats that number as a “human-readable size” and returns that value.
reset() resets the player so that it’s ready to upload more files.
updateButtons() updates the buttons based on the status of the upload application.
populateAlbumsList() pulls in an XML file formatted in a specific way that contains the albums in which a user may upload their photos, and adds them to a drop-down list as options to choose from.

Now this post was not meant to include a whole lot of explanation as to how I came about all this, and how each piece interacts with another.  This post assumes you have enough general scripting knowledge to figure out what is doing what – the code is listed in the same order it appears within the Actionscript file.  If you have questions feel free to post them in the comments and I’ll do my best to help answer your questions!

Alright – so what I’m going to show you is formatting a table so that its left column’s text is aligned to the right and its right column’s text is aligned to the left. To start – we need a table so let’s build that real quick.

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

So as you can see we’ve created a very simple table that has two rows and two columns. Nothing too fancy. If you were to put it in to a blank XHTML document it should display like this:

Now that we have our basic table let’s take a moment to reflect on how we might accomplish styling our table. We understand that in order to make columns in a row we add more td’s to our tr group, and that with CSS we can style those td’s using a simple td { text-align: right; } for example. This doesn’t work, however, because it targets all td’s – no matter the table, their placement, or the structure of the table. So, maybe we can use something a little more specific with descendant selectors by using tr td { text-align: right; }. That still doesn’t work correctly, however, as it selects all td’s that are descendants of a tr – which if we code our table correctly they will all be.

So we need to find a more specific method. You may never have heard of it, but you can use adjacent sibling selectors to accomplish a similar task as the decendant selectors, only more specific, which is what we need. If you’ve never seen adjacent sibling selectors, they look like td + td { text-align: right; }. What it is saying is to select the td that immediately follows another td tag, and to apply text-align: right; to it.

A note about adjacent sibling selectors: both selectors must have the same parent. So like, if we tried to do tr + td {text-align: right; }, though it would essentially be easier – it doesn’t work because tr’s parent is table and td’s parent is tr; so we need to tweak our styles a little bit to compensate for that.

<style type="text/css">
td {
  text-align: right;
}
td + td {
  background: #888;
  text-align: left;
}
</style>

Now – I added a background color to the column so that we can very easily see which column is being targeted. This is what you should have once you add that CSS to the header of your page:

It’s kind of hard to see the text-align having any effect because of the size of our table, so let’s modify our CSS real quick and add a style at the top to compensate for that, and allow us to see the text align working.

table {
  width: 350px;
}

Now that we added that style to the top of our CSS let’s see how it affected our table.

Now we can see the text-align is working properly, making our left column text align to the right and the right column to align to the left; problem solved, right? Well – not quite. What if our table has three columns, or eight, or even more? Well, let’s take a look.

Here’s where there’s a slight problem with our CSS. Say we needed column 3 to have the same style as column 1, well now we have to add another style to compensate for that – say making every third td reflect that of the first one, but remember that the style will cascade out as you add more columns. For the most part this is fairly sufficient for our needs, but keep in mind that when you use td + td, the second column in the table, and all subsequent columns will be affected. This is because column 1 plus column 2 selects column 2, then column 2 plus column 3 selects column 3, and it continues on down the line.

Hopefully that was helpful to you in some way! If you have a better way or any other comments/opinions please feel free to join in the discussion! You can find my complete example at http://www.coryreid.com/examples/styling-table-columns-with-css/.

• Portfolio section with working examples
• Allowing registration to access benefits such as: downloading content
• A services section so that you may view and employ my services
• A contact section so that you may easily get a hold of me

I realize that ideally I should have had the site completely ready to be published and just uploaded it and had it been fully functional – but I am only one person and it does take a tremendous amount of time to do this. Also I figured the less I had to actually upload and modify to get working on my live server the better off I would be.
Enjoy what I’ve got for now, and expect more to come soon!