Limit Flex Web App Upload file formats and size (server script PHP)

Question

Hello everyone

I have found this great tutorial, about uploading files with a Flex app, using Php to do the server scripting for us.

http://hybridhacking.com/tutorials/uploading-files-with-flex-using-php

Its great, but i wanted to know what changes should i do at the ActionScript so that only accepts image files, and if possible to limit the file size upload and show a message when one of these conditions are violated.

EDIT

File Filter & Size Limiter Done. Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="800" height="500" showCloseButton="true"
    creationComplete="init();">

    <mx:Script>
     <![CDATA[

            private var urlRequest:URLRequest;
            private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
      private var fileReferenceList:FileReferenceList;
      protected var maxSize = 600;
      private function init():void {
       urlRequest = new URLRequest('com-handler/n-prod.php');
       fileReferenceList = new FileReferenceList();
       fileReferenceList.addEventListener(Event.SELECT, fileSelectedHandler);
      }
      private function uploadFile():void {
       fileReferenceList.browse([imagesFilter]);
      }
      private function fileSelectedHandler(event:Event):void {
       var fileReference:FileReference;
       var fileReferenceList:FileReferenceList = FileReferenceList(event.target);
       var fileList:Array = fileReferenceList.fileList;
       // get the first file that the user chose
       fileReference = FileReference(fileList[0]);
       if (fileReference.size > maxSize)
       {
        statusText.text='File excedds max allowed';
       } else {
       // upload the file to the server side script
       fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
       fileReference.upload(urlRequest);
       // update the status text
       statusText.text = "Uploading...";
       }
      }
      private function uploadCompleteHandler(event:Event):void {
       statusText.text = "File Uploaded: " + event.target.name;
      }


     ]]>
    </mx:Script>
    <mx:Label x="132" y="105" id="statusText"/>
    <mx:Button x="132" click="uploadFile();" y="144" label="Button"/>

</mx:TitleWindow>

Notice that the Value of maxSize is in bytes.

PHP Code:

<?php
$tempFile = $_FILES['Filedata']['tmp_name'];
$fileName = $_FILES['Filedata']['name'];
$fileSize = $_FILES['Filedata']['size'];
move_uploaded_file($tempFile, "./" . $fileName);
?>

Answer 1

Check out the size property on FileReference to get the size of the file in bytes.

When you call browse() on FileReference to pick the file, you can pass in an Array of FileFilter objects. This will let you restrict what types of files are allowed.

Answer 2

The FileReference class has a size property. Before sending the file to the server, you can get the value of the property and check it against the max size you wish to allow.

package
{
    import flash.display.*;
    import flash.net.*;
    import flash.events.*;

    public class TestReference extends MovieClip
    {
     protected var maxSize = 600;

     public function TestReference():void
     {
      var ref:FileReference = new FileReference();
      ref.addEventListener(Event.SELECT, onFileSelect);
      ref.browse();
     }

     private function onFileSelect(e:Event):void
     {
      if (e.target.size > maxSize) {
       // do some error handling
      }
     }
    }
}