<Actionscript File Upload ⁄ >

10601

2010-07-23

mySnippets actionscript

Download

Bookmark This

File uploading's a common thing nowadays, from a forum, to a blog, or even you're personal website, it's really a very common task.

Usually we use html <form> to make such operation, we can even use Ajax, but in this snippet I'll give an example to file uploading, but with Flash, Actionscript 2.

Let's just build a simple class that gives you a few detailed informations about the file being uploaded.

In this snippet I'll only make a single file upload at once support, in the future I'll build a multiple-file upload.

Building a Class will allow us to re-use our code more often and in other projects, the class itself will do all the work, we'll only have to pass the correct values, so that everything will work fine.

If you already made/ worked in, a file upload using ajax you'll notice that in Actionscript things will work, more or less in the same, way. The communication/ transfer will be asynchronous. For this communication we'll use an Actionscript class named FileReference

Since Flash's a client-side language, we'll still need some server-side scripting, such as PHP (as equal in Ajax file-upload).

I "designed" a rather simple interface:

a Browse Button

an Upload Button

a textbox on which we'll display our filename and a few upload information

a textbox on which we'll show a numeric progress indicator (0 – 100%)

The class will allow us to create a progressing bar indicator too, but it'll build it automatically, as you'll see, later, in the code. Such tasks are optional, this is, you only use it as you care, besides this snippet being a simple upload class on which I tried to not overload the class, you can make some customizations.

Here's a screenshot of our interface:

As you'll also see we have a line of code in the previous screenshot, it'll include "Init.as", which will take care of the all process for us, if you don't write Actionscript

Here's a tip, try to code always in separate Actionscript file, it'll save you some time when you need to update

Here's a screenshot before start uploading:

FileUpload.as, this is our main Class, it'll communicate with the server and show the user information about file being uploaded. You can use it in another completely different project or layout, as long as you specify the valid arguments, you can also freely customize it to your own needs.

import flash.net.FileReference;
 
/**
 * This class will allow us to upload files
 * 
 * @author pedrocorreia.net
 * @see http://flash-reference.icod.de/flash/net/FileReference.html
 */
class FileUpload {
 
  private var _file_reference: FileReference;
 
  private var _script_upload:String  = "";
  private var _script_upload_params:Object = { };
 
  private var _file_type_extensions:String = "*.*";
  private var _file_type_description:String = "All Files";
 
  private var _btn_browse:Button;
  private var _btn_upload:Button;
  private var _txt_console:TextField;
  private var _txt_progress:TextField;
  private var _progress_bar:Object = { };  
 
  private static var _progress_bar_mc:String = "ProgressBar_mc";
 
  private var _messages = { };
 
  /**
   * Constructor
   * 
   * @param  Object Settings
   */
  public function FileUpload (settings:Object) {
    this._script_upload = settings._script_upload;
    this._script_upload_params = settings._script_upload_params;
 
    this._file_type_extensions = settings._file_type_extensions;
    this._file_type_description = settings._file_type_description;
 
    this._btn_upload = settings._btn_upload;
    this._btn_browse = settings._btn_browse;
    this._txt_console = settings._txt_console ;
    this._txt_progress = settings._txt_progress;
    this._progress_bar = settings._progress_bar;
 
    this._messages = settings._messages;
  }
 
  /**
   * Initialize
   */
  public function Init():Void {
    var
      $this = this, 
      _file_listener = {
        onSelect: function() { $this.__Selected(); } ,
        onOpen: function() { $this._Start(); },
        onProgress: function(file:FileReference, bytesLoaded:Number, bytesTotal:Number) {
          var 
            _transferred:Number = Math.floor(bytesLoaded / 1024) ,
            _total:Number = Math.floor(bytesTotal / 1024) ,
            _remaining:Number = _total - _transferred,
            _verbose_output:String = " (" + _transferred + "MB / " + _remaining + "MB / " + _total + "MB)";
 
          $this.__SetProgressText(Math.ceil((bytesLoaded / bytesTotal) * 100) + "%");
          $this.__SetConsoleText($this._messages._file_transferring + ": " +  $this._file_reference.name + _verbose_output);
 
          if ($this._progress_bar) { //check if progress bar indicator's enabled
            var
              _bar = $this._progress_bar._where["inner" + FileUpload._progress_bar_mc],
              _cur_width = $this._progress_bar._width;
 
            _bar._width = (bytesLoaded * _cur_width) / bytesTotal;
          }
        },
        onComplete: function() { $this._Complete(); },
        onHTTPError: function() { $this._Error(); },
        onIOError: function() { $this._Error(); },
        onSecurityError: function() { $this._Error(); }
      };
 
    this._file_reference = new FileReference();
    this._file_reference.addListener(_file_listener);
 
    this._btn_upload._visible = false;
    this.__DrawProgressBar();
 
    this.__CreateEvent(this._btn_browse, "Release", function() { $this._Browse(); });
    this.__CreateEvent(this._btn_upload, "Release", function() { $this._Upload(); });
  }
 
  /**
   * Browse dialog
   */
  private function _Browse():Void {
    this._file_reference.browse([ { 
      description: this._file_type_description,
      extension: this._file_type_extensions
      }]
    );
  }
 
  /**
   * Will occur when the file's opened to start transferring
   */
  private function _Start():Void {
    this._btn_upload._visible = false;
    this.__SetConsoleText(this._messages._file_transferring + ": " +  this._file_reference.name);
    this.__SetProgressText("0%");
    this.__ResetProgressBar();
  }
 
  /**
   * Upload file
   */
  private function _Upload():Void {
    if (!this._script_upload) {return; }
 
    //query string parameters
    var _query = [];
    for (var param in this._script_upload_params) {
      _query.push(param + "=" + this._script_upload_params[param]);
    }
    this._btn_browse._visible = false;
    this._file_reference.upload(this._script_upload + ((_query.length === 0) ? "" : "?" + _query.join("&")));
  }
 
  /**
   * Will occur on transfer file error
   */
  private function _Error():Void {
    this.__SetConsoleText(this._messages._file_upload_error + ": " + this._file_reference.name)
    this.__HideProgressBar();
    this._btn_browse._visible = true;
    this._btn_upload._visible = !(this._btn_browse._visible);
  }
 
  /**
   * Will occur on transfer complete sucessfully
   */
  private function _Complete():Void {
    this.__SetConsoleText(this._messages._file_upload_success + ": " + this._file_reference.name + " (" + Math.floor(this._file_reference.size / 1024) + "MB)");
    this._btn_upload._visible = false;
    this._btn_browse._visible = !this._btn_upload._visible;
  }
 
  /**
   * Show Upload button
   */
  private function __Selected():Void {
    if(this._txt_console){
      this._txt_console.text = this._messages._file_selected + ": " +  this._file_reference.name + " (" + Math.floor(this._file_reference.size / 1024) + "MB)";
    }
    this._btn_upload._visible = true;
  }
 
  /**
   * Draw ProgressBar indicator
   */
  private function __DrawProgressBar():Void {
    if (!this._progress_bar) return;
 
    var
      _bar = this._progress_bar,
      /**
       * Draw Rounded MovieClip
       * 
       * @param String MovieClip ID
       * @param MovieClip Create where
       * @param Number Width
       * @param Number Height
       * @param Number X Position
       * @param Number Y Position
       * @param Number Background Color
       * @param Number Border Color
       * @param Number Border Width
       * @param Boolean Visibility
       * 
       */
      drawRoundedRect = function(id:String, where:MovieClip, w:Number, h:Number, x:Number, y:Number, bg_color:Number, brd_color:Number,brd_width:Number, visibility:Boolean):Void {
        var bar:MovieClip =  where.createEmptyMovieClip(id, where.getNextHighestDepth());
        bar.lineStyle(brd_width, brd_color, 100, true, "none", "round", "miter", 1);
        bar.beginFill(bg_color);
        bar.lineTo(w, 0);
        bar.lineTo(w, h);
        bar.lineTo(0, h);
        bar.lineTo(0, 0);
        bar.endFill();
        bar._width = w;
        bar._x = x;
        bar._y = y;
        bar._visible = visibility;
      };
 
      drawRoundedRect(
        FileUpload._progress_bar_mc,
        _bar._where,
        _bar._width, _bar._height, _bar._x, _bar._y,
        _bar._canvas_color, _bar._border_color, _bar._border_width,
        true
      );
 
      drawRoundedRect(
        "inner" + FileUpload._progress_bar_mc,
        _bar._where,
        _bar._width, _bar._height, _bar._x, _bar._y,
        _bar._bg_color, _bar._border_color, _bar._border_width,
        false
      );
  }
 
  /**
   * Set Console text
   * 
   * @param  String
   */
  private function __SetConsoleText(text:String):Void {
    if (!this._txt_console) return;
    this._txt_console.text = text;
  }
 
  /**
   * Set ProgressText value
   * 
   * @param  String
   */
  private function __SetProgressText(text:String):Void {
    if (!this._txt_progress) return;
    this._txt_progress.text = text;
  }
 
  /**
   * Reset ProgressBar
   * @param Boolean Visibility
   */
  private function __ResetProgressBar(visibility:Boolean):Void {
    if (!this._progress_bar) return;
 
    if (!visibility) { visibility = true; }
    this._progress_bar._where["inner" + FileUpload._progress_bar_mc]._w = 0;
    this._progress_bar._where["inner" + FileUpload._progress_bar_mc]._visible = visibility;
  }
 
  /**
   * Hide ProgressBar
   */
  private function __HideProgressBar():Void { this.__ResetProgressBar(false);  }
 
  /**
   * Auxiliary function to add an EventHandler
   * 
   * @param Button Element
   * @param String Event Name
   * @param Function Callback Function
   */
  private function __CreateEvent(elem:Button, evt:String, callback:Function):Void{
    elem["on" + evt] = callback;
  }
 
} //end class FileUpload

Init.as, this is where we'll specify our settings to FileUpload class. The code's throughout self explanatory. In here you'll specify the settings such as the the upload script; your buttons; user messages; file extensions allowed and its description; progress bar settings, etc, etc.
Since there are many arguments, we'll use an Object to declare all our settings.

As I said before, we'll still have to use a server-side script also, because Flash's only a client-side scripting language. Besides uploading the file to the server, you can also send some information, just like a query string, or some fields in our regular html <form> tag. In our settings Object we have a parameter called "_script_upload_params", here's where you'll specify all the information that you want to send along with the file.

//used when loading as external swf, it's not strictly necessary,
//however it could save you a few headaches with paths ^_^''
_root._lockroot = true;
 
var 
  //cache our current "this"
  $self = this,
 
  //save path to form, in this example it's the same, however it could be different,
  //for instance, our form was inside a MovieClip, in this case it would be
  //$path = $self.myMovieClipName;
  $path = $self,
 
  settings = {
    //server script that will upload the file(s)
    _script_upload: "upload.php",
 
    //query string parameters (optional)
    //use this if you want to send information to the server 
    _script_upload_params: {
        dummy_x: "lorem",
        dummy_y: "ipsum",
        id: "123456"
      },
 
      //user messages (optional)
      _messages: {
        _file_upload_success: "File uploaded succefully",
        _file_upload_error: "Error while transferring file",
        _file_selected: "File selected",
        _file_transferring: "File being transferred"
      },
 
    //allowed extensions
    _file_type_extensions: "*.mp3; *.wav",
 
      //allowed extensions description
    _file_type_description: "Files MP3 Files (*.mp3; *.wav)",
 
    //upload button
    _btn_upload: $path["btn_upload"],
 
    //browse button
    _btn_browse: $path["btn_browse"],
 
    //textbox that will show the informations to the user (optional)
    _txt_console: $path["txt_console"],
 
    //textbox that will show the % progress (optional)
    _txt_progress: $path["txt_progress"],
 
    //progress bar (optional), customize it at your own needs
    _progress_bar: {
      _width: $path["txt_progress"]._width,
      _height: $path["txt_progress"]._height,
      _x: $path["txt_progress"]._x + 4,
      _y: $path["txt_progress"]._y + 30,
      _bg_color: 0xD15600,
      _canvas_color: 0xFFFFBD,
      _border_color: 0x3F4C6B,
      _border_width: 5,
      _where: $path
    }
  },
 
  //create FileUpload object
file_uploader = new FileUpload(settings);
 
//initialize our FileUploader and prepare all event handlers
file_uploader.Init();

upload.php, this is our php file, you can use any server-side language.

<?php
 
//these variables are the ones specified at "settings._script_upload_params", in Init.as
//as already stated, these variables are optional, use them in case you want to
//send some information to the server
$dummy_x = $_POST["dummy_x"];
$dummy_y = $_POST["dummy_y"];
$id = $_POST["id"];
 
//move file
move_uploaded_file($_FILES['Filedata']['tmp_name'], $_FILES['Filedata']['name']);
 
//your script goes here
?>

And finally, here goes a video of our script working ^_^''

If you have any doubt or found any error, please drop me an email.

10601

2010-07-23

mySnippets actionscript

Download

Bookmark This