Creating the video upload component

You can use Flex or Flash technology (or even an HTML web form) to build a front end for uploading files to a web server. Either way, you'll need a server-side script to receive and save the files. In this case, I'll use a simple PHP script.

Please note that PHP limits the upload capacity to 2MB in the default configuration. If you plan to use this example to build and deploy your own application, I recommend changing the PHP configuration to increase the maximum upload limit to allow users to upload larger files if desired.

Building the upload interface in Flex

As a first step, you'll create a Flex-based upload interface using Flex UI components and the built-in upload feature of the FileReference class. Open your Flex authoring environment and create a new project; name it videoshare. Use the code below to display a simple upload interface with a progress bar:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:HBox id="mainui" height="330" autoLayout="false">
  <mx:Form id="uploadform" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  <mx:FormItem label="Choose your file:" id="formitem">
     <mx:TextInput id="videofile" editable="false" x="10" y="358"/>
  </mx:FormItem>
  <mx:FormItem id="browsearea" >
     <mx:Button label="Browse" click="onBrowse()" x="180" y="359" id="browse_btn"/>
     <mx:Button id="upload_btn" click="onUpload()" label="Upload" width="68" enabled="false" x="256" y="360"/>
  </mx:FormItem>
  </mx:Form>
 </mx:HBox>
</mx:Application>

This MXML structure displays the upload component with a progress bar shown in Figure 2.

Figure 2. User interface for browsing and uploading a video file

To enable the button functionality, you'll need to define the onBrowse() and onUpload() functions for handling the click events:

// Event handler for the browse button
private function onBrowse() : void {

    fileRef = new FileReference();
    fileRef.addEventListener(Event.SELECT, selectHandler);
 
    try
    {
        var success:Boolean = fileRef.browse();
    }
    catch (error:Error)
    {
        trace("Unable to browse for files.");
    }
    function selectHandler(event:Event):void
    {
        videofile.text = fileRef.name;
        status.text = "Ready for upload";
        uploadedFile = fileRef.name;
        upload_btn.enabled = true;
    }
}
 
// Event handler for the upload button
// Triggers an upload to the server
 
private function onUpload():void {
   progressbar.label == "";
   var request:URLRequest = new URLRequest("http://" + phpserver + "/videoscript/upload.php")
 
  // Add an event listener to monitor the progress of the upload
  fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
try
    {
      fileRef.upload(request);
      status.text = "Uploading " + fileRef.name + " ... ";
      browse_btn.enabled = false;
      upload_btn.enabled = false;
    }
 
    catch (error:Error) {
       status.text = "Upload error";
    }
}

The ActionScript code above creates a FileReference object, which allows the user to select the file with the browse dialog box and upload the file to the server. Since video files can be large, an important visual indicator is the progress bar. The code above already added progressHandler() as an event listener, which displays the upload progress with the progress bar:

// Displays the current progress of the upload
private function progressHandler(event:ProgressEvent):void {
  progressbar.setProgress(Math.floor(event.bytesLoaded/1024),Math.floor(event.bytesTotal/1024));
     progressbar.label = "Uploading .. " + Math.floor(event.bytesLoaded/1024) + " of " + Math.floor(event.bytesTotal/1024) + " kbytes";'';
     if (event.bytesLoaded == event.bytesTotal) {
        completeHandler();
     }
}

Writing the server-side PHP script

To receive the files on a web server, you'll need a server-side component. In this case, you'll use a PHP script for this purpose. Create an upload.php file and save it at a path that is accessible through HTTP at http://[MY_SERVER_DNS]/videoscript/upload.php. Add the following script to the file:

<?php
  if(!is_dir("c:/videoshare/uploaded"))
     mkdir("c:/videoshare/uploaded", 0755);
     move_uploaded_file($_FILES['Filedata']['tmp_name'],
     "c:/videoshare/uploaded/".$_FILES['Filedata']['name']);
?>

The script receives the uploaded files and moves them to the folder C:\videoshare\uploaded.

Note: The path is Windows specific; another OS might follow a different file path pattern.

Page 2 of 6

Previous Page

Next Page