Many flex user need to know about file uploading in flex. Today I am giving you some information with code examples regarding file uploading in flex.
The FileReference class provides a means to upload and download files between a user’s computer and a server.
An operating-system dialog box prompts the user to select a file to upload or a location for download. Each FileReference object refers to a single file. You can get information about file like Name of file, Size of file, date of creation and date of modification etc. with the help of FileReference properties.
FileReference instances are created by the following ways:
var myFileReference = new FileReference();
By default, the system open file dialog box allows users to select any file type from the local computer, although you can specify one or more custom file type filters by 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 you attempt to upload a file using the FileReference.upload() method, any of the following events may be dispatched:
- Event.OPEN: Dispatched when an upload operation starts.
- ProgressEvent.PROGRESS: Dispatched periodically during the file upload operation.
- Event.COMPLETE: Dispatched when the file upload operation completes successfully.
- SecurityErrorEvent.SECURITY_ERROR: Dispatched when an upload fails because of a security violation.
- HTTPStatusEvent.HTTP_STATUS: Dispatched when an upload fails because of an HTTP error.
- IOErrorEvent.IO_ERROR: Dispatched if the upload fails because of 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.
You can declare event and there call back function is as follow:
fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
The above code statement declares that on occurring any of the above declared event which function should be call.
The following example shows you how you can use the FileReference class’s browse() method to allow users to select and upload a single file to a Web server.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
private var fileRef:FileReference;
private const FILE_UPLOAD_URL:String = "http://www.yourdomain.com/services/upload.php";
private function init():void {
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
}
private function browseAndUpload():void {
fileRef.browse();
message.text = "";
}
private function fileRef_select(evt:Event):void {
try {
message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
} catch (err:Error) {
message.text = "ERROR: zero-byte file";
}
}
private function fileRef_progress(evt:ProgressEvent):void {
progressBar.visible = true;
}
private function fileRef_complete(evt:Event):void {
message.text += " (complete)";
progressBar.visible = false;
}
]]>
</mx:Script>
<mx:NumberFormatter id="numberFormatter" />
<mx:Button label="Upload file"
click="browseAndUpload();" />
<mx:Label id="message" />
<mx:ProgressBar id="progressBar"
indeterminate="true"
visible="false" />
</mx:Application>
In the above example we take a progress bar which will show the progress of file uploading. We also take a button which opens a system file open dialog box to select file from local computer.
When ever the above flex code gets execute first of all init() function will run. Using this function we create instance of FileReference and declare call back function for three FileReference events SELECT, PROGRESS and COMPLETE.
When we system dialog box using browse() and user will select a file from local computer at that time SELECT event will fire and the declared method will call to upload file at server by Upload().
When file uploading start at server to show uploading process we set the progress bar value at every time when PROGRESS event fire.
When file uploaded successfully at the server COMPLETE event fire we write appropriate code in that function which do what we want to do after file uploaded at server.
Please write a file for handling uploading using php and upload at the server and set its URL in the flex code. You can get lots of example of php file uploading just search on google.
The above code example upload single file at a time. If you want to allow users to upload multiple files at once, you would use the FileReferenceList class instead of FileReference.
I will post a example for FileReferenceList in my next post.
I hope the above information helps a lot if you have any query then feel free to ask. Please post your comment for the motivation to posting me information about flex here. if you need any other code example please let me know.
