• I could spend a few hundred dollars on a java applet. Though this is a nice application that lets you view and select the files you want, it is a little expensive when you just want the functionality of uploading multiple files. Or you could build your own. Though for me, I think buying one is cheaper than spending the time on building one.
• I could use flash to turn my regular browse dialog box into a multiple file upload dialog box.

For now, I decided to go with option B. At some point I might add option A to the site but it will still be nice to have the Flash based upload application for those people that don’t have java installed. And if they don’t have flash installed I’ll make sure they can upload one file at a time as well.

So this is how I accomplished it.

First off I am using Flash 8 and actionscript 2

After you create the button go back to the root and add everything there.

Here is what we need to include:

I create two listener objects, one for the FileReferenceList and one for the FileReference.

var listener:Object = new Object();
var listener2:Object = new Object();


I then create a few variables:

This is the onSelect event that is fired after selecting file(s) in the browse dialog box and then hitting the Select button.

listener.onSelect = function(fileRefList:FileReferenceList) {
	list = fileRefList.fileList;
	numfiles = list.length;
	uploadItem(itemnum);   // function to actually upload the photos
}

This event is called after each photo selected has been uploaded. It also calls a javascript function “showpics” which is an ajax call to display each photo after it has been uploaded.

listener2.onComplete = function(){
	itemnum += 1;
	ExternalInterface.call("showpics");
	if(itemnum<numfiles)
		uploadItem(itemnum);  //call function on next photo
}

This is the function to actually upload the file . The file you send it to should be a relative link otherwise flash 10 will throw a security error.

function uploadItem(num:Number){
	var item:FileReference = list[num];
	item.addListener(listener2);
	item.upload("yourfile.php");
}

We need to create an array of the types of files that we want to to be able to select from the browse dialog box.

var allTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.JPG;*.JPEG;*.JPE;*.GIF;*.PNG;)";
imageTypes.extension = "*.jpg; *.JPG; *.jpeg; *.jpe; *.gif; *.png;";
allTypes.push(imageTypes);

Finally, this is the function that will actually display the browse dialog box.

function uploadFile(){
	var fileRef:FileReferenceList = new FileReferenceList();
	fileRef.addListener(listener);
	fileRef.browse(allTypes);
}

The next part is to add the onClick handler to the button. Make sure you set the variable name of the button to something; in this case “btn”.

btn.onClick = function(){
uploadpics();
}

This next part allows me to use a simple input of type button to call the uploadFile function unless the user has flash 10 installed and then this wont work.

ExternalInterface.addCallback("javascript_function_name", this, "uploadFile");

And that is it. Nice and simple.

* Note: Apparently if you’re using a Mac OS the onComplete event doesn’t work unless you echo “1″ at the end of the file you passed the image to. This way Macs know the file finished uploading.

**Also note that there is an even simpler and quicker way if all you want to do is upload the images without changing them.

To do it that way just change the following code:

listener.onSelect = function(fileRefList:FileReferenceList) {
    list = fileRefList.fileList;
    var item:FileReference;
    numfiles = list.length;
    for(var i=0; i<numfiles; i++){
        item = list[i];
  	item.upload("yourfile.php");
    }
}

I didn’t do it this way because I am creating thumbnails of each image and needed each image to be done before the next image is uploaded.


View Example

Download FLA File

Show Code