Jun
08
2010

 

Using FileReference, you can allow user to upload files from their computer to be used. This can be useful in applications such as photo processing applications, image manipulation applications, etc. For more information, see:
http://www.permadi.com/blog/2009/05/actionscript-3-using-file-reference-to-load-local-swf/

Here’s the general outline of the steps required to load a file from user’s computer. Note that these steps require user’s approval, meaning that the user must click a button to “approve” the process.
- Call FileReference.browse() in response to a user action (such as clicking a button).
- Listen to Event.SELECT, which indicates thet the user has selected a file.
- Call FileReference.load() to load the file.
- Listen to Event.COMPLETE, which indicates thet the file is uploaded and ready to use.

Example1

This example allows user to select an text file (txt, html, or php) into the application. The example below is written in Flash CS4. The FLA can be downloaded here.

[c]// www.permadi.com

import flash.events.MouseEvent;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.utils.ByteArray;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.display.MovieClip;
import fl.controls.ProgressBarMode;
import fl.controls.TextArea;

var mFileReference:FileReference;

// Setup button to handle browsing
browseButton.buttonMode=true;
browseButton.mouseChildren=false;
browseButton.addEventListener(MouseEvent.CLICK, onBrowseButtonClicked);
// Hide progress bar
progressBar.visible=false;

// This function is called when the BROWSE button is clicked.
function onBrowseButtonClicked(event:MouseEvent):void
{
	trace("onBrowse");
	mFileReference=new FileReference();
	mFileReference.addEventListener(Event.SELECT, onFileSelected);
	var swfTypeFilter:FileFilter = new FileFilter("Text Files","*.txt; *.html;*.htm;*.php");
	var allTypeFilter:FileFilter = new FileFilter("All Files (*.*)","*.*");
	mFileReference.browse([swfTypeFilter, allTypeFilter]);
}

// This function is called after user selected a file in the file browser dialog.
function onFileSelected(event:Event):void
{
	trace("onFileSelected");
	// This callback will be called when the file is uploaded and ready to use
	mFileReference.addEventListener(Event.COMPLETE, onFileLoaded);
	
	// This callback will be called if there's error during uploading
	mFileReference.addEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	
	// Optional callback to track progress of uploading
	mFileReference.addEventListener(ProgressEvent.PROGRESS, onProgress);
	
	// Tells the FileReference to load the file
	mFileReference.load();
	
	// Show progress bar
	progressBar.visible=true;			
	progressBar.mode=ProgressBarMode.MANUAL;
	progressBar.minimum=0;
	progressBar.maximum=100;			
	
	browseButton.visible=false;
}

// This function is called to notify us of the uploading progress
function onProgress(event:ProgressEvent):void
{
	var percentLoaded:Number=event.bytesLoaded/event.bytesTotal*100;
	trace("loaded: "+percentLoaded+"%");
	progressBar.setProgress(percentLoaded, 100);
}

// This function is called after the file has been uploaded.
function onFileLoaded(event:Event):void
{
	var fileReference:FileReference=event.target as FileReference;
	
	// These steps below are to pass the data as DisplayObject 
	// These steps below are specific to this example.
	var data:ByteArray=fileReference["data"];
	textArea.text=data.toString();
	browseButton.visible=true;
	progressBar.visible=false;	
	mFileReference.removeEventListener(Event.COMPLETE, onFileLoaded);
	mFileReference.removeEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	mFileReference.removeEventListener(ProgressEvent.PROGRESS, onProgress);	
}

function onFileLoadError(event:Event):void
{
	// Hide progress bar
	progressBar.visible=false;
	browseButton.visible=true;
	mFileReference.removeEventListener(Event.COMPLETE, onFileLoaded);
	mFileReference.removeEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	mFileReference.removeEventListener(ProgressEvent.PROGRESS, onProgress);	
	
	trace("File load error");
}   
[/c]

Example 2

This example allows user to select an image file (PNG, SWF, or JPEG) into the application. The example below is written in Flash CS4. The FLA can be downloaded here.

The code is similar to the first example, the only difference is some additions to display the image.

[c]
import flash.events.MouseEvent;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.utils.ByteArray;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.display.MovieClip;
import fl.controls.ProgressBarMode;

var mFileReference:FileReference;

// Setup button to handle browsing
browseButton.buttonMode=true;
browseButton.mouseChildren=false;
browseButton.addEventListener(MouseEvent.CLICK, onBrowseButtonClicked);
// Hide progress bar
progressBar.visible=false;

// This function is called when the BROWSE button is clicked.
function onBrowseButtonClicked(event:MouseEvent):void
{
	trace("onBrowse");
	mFileReference=new FileReference();
	mFileReference.addEventListener(Event.SELECT, onFileSelected);
	var swfTypeFilter:FileFilter = new FileFilter("SWF/JPG/PNG Files","*.jpeg; *.jpg;*.gif;*.png");
	var allTypeFilter:FileFilter = new FileFilter("All Files (*.*)","*.*");
	mFileReference.browse([swfTypeFilter, allTypeFilter]);
}

// This function is called after user selected a file in the file browser dialog.
function onFileSelected(event:Event):void
{
	trace("onFileSelected");
	// This callback will be called when the file is uploaded and ready to use
	mFileReference.addEventListener(Event.COMPLETE, onFileLoaded);
	
	// This callback will be called if there's error during uploading
	mFileReference.addEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	
	// Optional callback to track progress of uploading
	mFileReference.addEventListener(ProgressEvent.PROGRESS, onProgress);
	
	// Tells the FileReference to load the file
	mFileReference.load();
	
	// Show progress bar
	progressBar.visible=true;			
	progressBar.mode=ProgressBarMode.MANUAL;
	progressBar.minimum=0;
	progressBar.maximum=100;			
	
	browseButton.visible=false;
	
}

// This function is called to notify us of the uploading progress
function onProgress(event:ProgressEvent):void
{
	var percentLoaded:Number=event.bytesLoaded/event.bytesTotal*100;
	trace("loaded: "+percentLoaded+"%");
	progressBar.setProgress(percentLoaded, 100);
}

// This function is called after the file has been uploaded.
function onFileLoaded(event:Event):void
{
	var fileReference:FileReference=event.target as FileReference;
	
	// These steps below are to pass the data as DisplayObject 
	// These steps below are specific to this example.
	var data:ByteArray=fileReference["data"];
	trace("File loaded");
	
	mFileReference.removeEventListener(Event.COMPLETE, onFileLoaded);
	mFileReference.removeEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	mFileReference.removeEventListener(ProgressEvent.PROGRESS, onProgress);	
	browseButton.visible=true;

	var movieClipLoader:Loader=new Loader();
	movieClipLoader.loadBytes(data);
	movieClipLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMovieClipLoaderComplete);

}

function onFileLoadError(event:Event):void
{
	// Hide progress bar
	progressBar.visible=false;
	browseButton.visible=true;
	mFileReference.removeEventListener(Event.COMPLETE, onFileLoaded);
	mFileReference.removeEventListener(IOErrorEvent.IO_ERROR, onFileLoadError);
	mFileReference.removeEventListener(ProgressEvent.PROGRESS, onProgress);	
	trace("File load error");
}   

// This function below is specific to this example.
// It does the processing required to display the swf/png/jpeg file that we have just loaded.
function onMovieClipLoaderComplete(event:Event):void
{
	// Hide progress bar
	progressBar.visible=false;
	var loadedContent:DisplayObject=event.target.content;
	var loader:Loader=event.target.loader as Loader;
	// Fit to stage
	trace("loadedContent.width="+loadedContent.width);
	loadedContent.scaleX=container.width/loadedContent.width;
	loadedContent.scaleY=container.height/loadedContent.height;
	trace("loadedContent.scaleX="+loadedContent.scaleX);
	trace("loadedContent.width="+loadedContent.width);
	trace("this.stage.width="+this.stage.width);
	container.addChild(loader);
}

[/c]

Note:
In order to load a file, user must perform an action such as clicking a button. This is for security reason since no-one would want a Flash application that silently loads something from their hard-drive.

Comments are closed.