by
Kyle Murray aka Krilnon |
3 January 2007The ability to upload files to a
server from Flash was one of the most requested features
added in Flash 8. Flash implements this ability through the
FileReference class. This tutorial will serve as an
introduction to the uploading features of the class and
hopefully the example provided will help you on your way towards
building your own upload-capable application!
The FileReference class allows Flash to open the familiar
file selection dialog box that displays a list of files
found on a user's file system. Once a file has been
selected, Flash can then begin to upload the file to a
remote server. FileReference also provides Flash with some
information regarding the file that may be useful to you as
a developer. For example, the name, size, and file
type/extension can all be accessed through FileReference
properties.
There are a few points regarding
FileReference that continue to come up in the forums.
One important thing to keep in mind is that Flash will
never know the location of the file on the user's
computer. If a file 'file:///C:/Kirupa/image.jpg' was
selected using FileReference's browse method,
Flash would only know that the file was named
'image.jpg'. Second, some sort of server-side upload
script is needed to successfully upload a file. Flash
alone cannot upload a file to a server, even with
FileReference.
Below is an image of what you will have produced by the
end of this tutorial. You can test out a complete version
using the source files given throughout this tutorial and a
server of your own.
[ a screenshot of the uploader in action
]
Download the full Flash source for this tutorial now.
Don't worry, the important part of this tutorial, the
ActionScript, will be covered in detail later. The .fla file
contains two buttons for user input and a TextField to keep
the user informed. An example server-side script will be
provided later on.
Download Full Flash Source
Once you've opened the document, navigate to the
'Actions' layer on the first frame, make sure that the
Actions panel is visible. On the
next page, we'll break down the source code and
examine it line-by-line.
Onwards to the next page!
|