Uploading Files using FileReference - Page 1
       by Kyle Murray aka Krilnon  |  3 January 2007

The 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.

Note:

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 ]

Let's Begin:
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!

1 | 2 | 3 | 4




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.