Reyco1’s Flash Blog

Reynaldo August 14th, 2008

For about a week now I have been trying to upload multiple files to my server using flash and PHP. It I used the FileReference class to select the file from my system and once selected used the “upload” method to upload it and it worked like a charm! But selecting and uploading one file at a time can become pretty very annoying and tedious so I figured that using FileRegerenceList, I would be able to choose multiple files and have those upload simultaneously.

NOTE : THE FOLLOWING CODE DID NOT WORK AND I’LL EXPLAIN WHY

[source language="Ruby"]
var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();
function selectHandler(event:Event):void {
var request:URLRequest = new URLRequest(”http://[mydomain].com/upload.php”);
var files:FileReferenceList = FileReferenceList(event.target);
var selectedFileArray:Array = files.fileList;
for (var i:uint = 0; i < selectedFileArray.length; i++) {
var file:FileReference;
file = FileReference(selectedFileArray[i]);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try {
file.upload(request);
} catch (error:Error) {
trace("Unable to upload files.");
}
}
}
function completeHandler(event:Event):void {
var file:FileReference = FileReference(event.target);
trace(file.name+" uploaded.");
}
function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target);
trace("progressHandler: name = " + file.name + " bytesLoaded = " + event.bytesLoaded + " bytesTotal = " + event.bytesTotal);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}[/source]

What I was doing in the code above was using FileReferenceList to select all the files that I wanted to upload to my server, that was fine. That fires an Event.SELECT event; in the handler for that event, I created a URLRequest passing it the url to where my server side upload script is located. The FileReferenceList basically is an Array of FileReference objects, hence I figured I could loop through it, addlisteners to each of the FileReference objects, run the upload method and that's it? NOPE! Didn't work! Even though all my traces were indicating that all my files were being uploaded succesfully, when I went to check my server, there were no files there.

It turns out that flash really CANNOT UPLOAD MORE THAN ONE FILE AT A TIME.

Basically... "Listeners receive events to indicate the progress, success, or failure of the upload. Although you can use the FileReferenceList object to let users select multiple files for upload, you must upload the files one by one; to do so, iterate through the FileReferenceList.fileList array of FileReference objects.

The FileReference.upload() and FileReference.download() functions are nonblocking. These functions return after they are called, before the file transmission is complete. In addition, if the FileReference object goes out of scope, any upload or download that is not yet completed on that object is canceled upon leaving the scope. Be sure that your FileReference object remains in scope for as long as the upload or download is expected to continue.”

In other words, what i needed to do was not a run a loop, but actually create a function that will upload a single file and on the handler for the complete event for that function, load the next file in queue. Worry not if that sounds a little confusing here’s the new and improved working code:

[source language="Ruby"]
var uploadQueue:Number = 0;
var selectedFileArray:Array = [];
var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
var files:FileReferenceList = FileReferenceList(event.target);
selectedFileArray = files.fileList;
loadQueue(uploadQueue);
}
function loadQueue($index:Number):void
{
if($index < selectedFileArray.length){
var request:URLRequest = new URLRequest(”http://www.[mydomain].com/upload.php”);
var file:FileReference = FileReference(selectedFileArray[$index]);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try
{
file.upload(request);
}
catch (error:Error)
{
trace(”Unable to upload files.”);
}
}else{
trace(”All files uploaded.”);
}
}
function completeHandler(event:Event):void
{
var file:FileReference = FileReference(event.target);
file.removeEventListener(Event.COMPLETE, completeHandler);
file.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
file.removeEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
trace(file.name+” uploaded.”);
uploadQueue++
loadQueue(uploadQueue);
}
function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target);
trace(”progressHandler: name = ” + file.name + ” bytesLoaded = ” + event.bytesLoaded + ” bytesTotal = ” + event.bytesTotal);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace(”ioErrorHandler: ” + event);
}[/source]

And here’s the php code that i’m using server side:

[source language="Ruby"]
//path to storage
$storage = ‘images’;

//allow path to be changed dynamically
if($_GET['uploadDir'] != “”) {
$storage = $_GET['uploadDir'];
}

//path name of file for storage
$uploadfile = “$storage/” . $_FILES['Filedata']['name'];

//if the file is moved successfully
if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) {
echo( ‘1 ‘ . $_FILES['Filedata']['name']);
header(”Location: http://www.google.com”);
//file failed to move
}else{
echo( ‘0′);
}[/source]

ENJOY!

• Flash