Flex Component : Yet Another Flex File Upload Component

There are several Flex upload components floating around and I gave most of them a good look over but I was not able to find one which suited my needs so I decided to make my own. Here it is for you to enjoy.

Click here to view a demo
(demo lets you upload up to 3 files at a time with a max size of 4 megs each)

Click here to view the source

The usage of the component is pretty straight forward. You can set some properties to define what types of files can be uploaded and you direct the 'upload' towards a server side script. In my demo I send the files to a basic PHP script ( which I've included below ). The script handles one file at a time and is expected to report back either the string 'successful' or an error message which is displayed.

Properties

The following public properties can be set to customize the use of this component

• uploadButtonLabel : String = 'Upload'
  This is the label used for the 'upload' button.
  
  
• selectButtonLabel : String = 'Select File(s)'
  This is the label used for the 'select' button.
  
  
• removeButtonLabel : String = 'Remove Selected File'
  This is the label used for the 'remove' button.
  
  
• maxFileCount : Number = 3
  This sets the number of files a user is allowed to upload
  
  
• maxFileSize : Number = 1
  This sets the maximum file size (in megs) for each individual file. Default is 1 meg.
  
  
• requestUrl : String = ''
  This is the URL for your PHP/ASP/ColdFusion/Other script which you will send the uploaded files to. THIS PROPERTY MUST BE SET !
  
  
• allowOnlyImages : Boolean = false
  If set to 'true' the user will only be able to select image files
  
  
• allowOnlyText : Boolean = false
  If set to 'true' the user will only be able to select text files.
  
  
• allowAllFiles : Boolean = true
  If set to 'true' the user can upload images or text files.
  
  
• barColor : String
  Allows you to style the progress bar

Events

The component has one event 'uploadComplete' which is triggered if all files are uploaded successfully.

The PHP Handler

Following is the source for the simple PHP script which I am using in the demo. In this script I am just confirming that the file was uploaded successfully and then I am deleting it. Since this is a public demo I don't want people filling up my server with unwanted images. In your script you would most likely copy the FILE to a more permanent location and possibly do a little more validation. The script needs to echo the string 'success' or echo an error message.

$hasError = false;
foreach( $_FILES as $i=>$file ){
  if ( $file['error'] ){
     $hasError = true;
  }
  /**
   * Because this is a public example. I am just going to immediately delete
   * the file which was uploaded.  In a regular application you would copy the file
   * from it's temporary location to it's permament location.
   */
   unlink( $file['tmp_name'] );  
}

if ( ! $hasError ){
  echo('success');
} else {
  echo('Stick custom error message here');
}