To upload
files to a server, first call the browse() method
to allow a user to select one or more files. Next, when the FileReference.upload() method is
called, the selected file is transferred to the server. If the user
selects multiple files using the FileReferenceList.browse() method,
Flash Player creates an array of selected files called FileReferenceList.fileList. You
can then use the FileReference.upload() method
to upload each file individually.
Note: Using the FileReference.browse() method
allows you to upload single files only. To allow a user to upload
multiple files, you must use the FileReferenceList.browse() method.
By default, the system file picker dialog box allows users to
pick any file type from the local computer, although developers
can specify one or more custom file type filters by using the FileFilter
class and passing an array of file filter instances to the browse() method:
var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);
When the user has selected the files and clicked the Open button
in the system file picker, the Event.SELECT event
is dispatched. If the FileReference.browse() method
is used to select a file to upload, the following code is needed
to send the file to a web server:
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
try
{
var success:Boolean = fileRef.browse();
}
catch (error:Error)
{
trace("Unable to browse for files.");
}
function selectHandler(event:Event):void
{
var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm")
try
{
fileRef.upload(request);
}
catch (error:Error)
{
trace("Unable to upload file.");
}
}
function completeHandler(event:Event):void
{
trace("uploaded");
}
You can send data to the server with the
FileReference.upload() method
by using the
URLRequest.method and
URLRequest.data properties
to send variables using the
POST or
GET methods.When you attempt to upload a file using the FileReference.upload() method,
the following events may be dispatched:
open event (Event.OPEN):
Dispatched when the upload operation starts.
progress event (ProgressEvent.PROGRESS):
Dispatched periodically as bytes of data from the file are uploaded.
complete event (Event.COMPLETE):
Dispatched when the upload operation completes successfully.
httpStatus event (HTTPStatusEvent.HTTP_STATUS):
Dispatched when the upload process fails because of an HTTP error.
httpResponseStatus event (HTTPStatusEvent.HTTP_RESPONSE_STATUS):
Dispatched if a call to the upload() or uploadUnencoded() method
attempts to access data over HTTP and Adobe AIR is able to detect
and return the status code for the request.
securityError event (SecurityErrorEvent.SECURITY_ERROR): Dispatched
when an upload opertaion fails because of a security violation.
uploadCompleteData event (DataEvent.UPLOAD_COMPLETE_DATA):
Dispatched after data is received from the server after a successful
upload.
ioError event (IOErrorEvent.IO_ERROR):
Dispatched if the upload process fails for any of the following
reasons:
An input/output error occurred while Flash
Player is reading, writing, or transmitting the file.
The SWF tried to upload a file to a server that requires
authentication (such as a user name and password). During upload,
Flash Player does not provide a means for users to enter passwords.
The url parameter contains an invalid protocol.
The FileReference.upload() method must use either
HTTP or HTTPS.
Flash Player does not offer complete support
for servers that require authentication. Only SWF files that are
running in a browser using the browser plug-in or Microsoft ActiveX® control can provide a dialog box to prompt
the user to enter a user name and password for authentication, and
then only for downloads. For uploads using the plug-in or ActiveX
control or upload/download using either the stand-alone or external
player, the file transfer fails.
To create a server script in ColdFusion to accept a file upload
from Flash Player, you can use code similar to the following:
<cffile action="upload" filefield="Filedata" destination="#ExpandPath('./')#" nameconflict="OVERWRITE" />
This ColdFusion code uploads the file sent by Flash Player and
saves it to the same directory as the ColdFusion template, overwriting
any file with the same name. The previous code shows the bare minimum
amount of code necessary to accept a file upload; this script should
not be used in a production environment. Ideally, you should add
data validation to ensure that users upload only accepted file types,
such as an image instead of a potentially dangerous server-side
script.
The following code demonstrates file uploads using PHP, and it
includes data validation. The script limits the number of uploaded
files in the upload directory to 10, ensures that the file is less
than 200 KB, and permits only JPEG, GIF, or PNG files to be uploaded
and saved to the file system.
<?php
$MAXIMUM_FILESIZE = 1024 * 200; // 200KB
$MAXIMUM_FILE_COUNT = 10; // keep maximum 10 files on server
echo exif_imagetype($_FILES['Filedata']);
if ($_FILES['Filedata']['size'] <= $MAXIMUM_FILESIZE)
{
move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temporary/".$_FILES['Filedata']['name']);
$type = exif_imagetype("./temporary/".$_FILES['Filedata']['name']);
if ($type == 1 || $type == 2 || $type == 3)
{
rename("./temporary/".$_FILES['Filedata']['name'], "./images/".$_FILES['Filedata']['name']);
}
else
{
unlink("./temporary/".$_FILES['Filedata']['name']);
}
}
$directory = opendir('./images/');
$files = array();
while ($file = readdir($directory))
{
array_push($files, array('./images/'.$file, filectime('./images/'.$file)));
}
usort($files, sorter);
if (count($files) > $MAXIMUM_FILE_COUNT)
{
$files_to_delete = array_splice($files, 0, count($files) - $MAXIMUM_FILE_COUNT);
for ($i = 0; $i < count($files_to_delete); $i++)
{
unlink($files_to_delete[$i][0]);
}
}
print_r($files);
closedir($directory);
function sorter($a, $b)
{
if ($a[1] == $b[1])
{
return 0;
}
else
{
return ($a[1] < $b[1]) ? -1 : 1;
}
}
?>
You can pass additional variables to the upload script using
either the POST or GET request
method. To send additional POST variables to your
upload script, you can use the following code:
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.browse();
function selectHandler(event:Event):void
{
var params:URLVariables = new URLVariables();
params.date = new Date();
params.ssid = "94103-1394-2345";
var request:URLRequest = new URLRequest("http://www.yourdomain.com/FileReferenceUpload/fileupload.cfm");
request.method = URLRequestMethod.POST;
request.data = params;
fileRef.upload(request, "Custom1");
}
function completeHandler(event:Event):void
{
trace("uploaded");
}
The previous example creates a new URLVariables object that you
pass to the remote server- side script. In previous versions of
ActionScript, you could pass variables to the server upload script
by passing values in the query string. ActionScript 3.0 allows you
to pass variables to the remote script using a URLRequest object,
which allows you to pass data using either the POST or GET method;
this, in turn, makes passing larger sets of data easier and cleaner.
In order to specify whether the variables are passed using the GET or POST request
method, you can set the URLRequest.method property
to either URLRequestMethod.GET or URLRequestMethod.POST,
respectively.
ActionScript 3.0 also lets you override the default Filedata upload
file field name by providing a second parameter to the upload() method,
as demonstrated in the previous example (which replaced the default
value Filedata with Custom1).
By default, Flash Player will not attempt to send a test upload,
although you can override this by passing a value of true as
the third parameter to the upload() method. The
purpose of the test upload is to check whether the actual file upload will
be successful and that server authentication, if required, will
succeed.
Note: A test upload occurs only on Windows-based Flash
Players at this time.
The server script that handles the file upload should expect
an HTTP POST request with the following elements:
Content-Type with a value of multipart/form-data.
Content-Disposition with a name attribute
set to “ Filedata” and a filename attribute
set to the name of the original file. You can specify a custom name attribute
by passing a value for the uploadDataFieldName parameter
in the FileReference.upload() method.
The binary contents of the file.
Here is a sample HTTP POST request:
POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filename"
sushi.jpg
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filedata"; filename="sushi.jpg"
Content-Type: application/octet-stream
Test File
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Upload"
Submit Query
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
(actual file data,,,)
The following sample HTTP POST request sends
three POST variables: api_sig, api_key,
and auth_token, and uses a custom upload data field name
value of "photo":
POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"
sushi.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_sig"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_key"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="auth_token"
XXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="photo"; filename="sushi.jpg"
Content-Type: application/octet-stream
(actual file data,,,)
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"
Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--
