Quick Tip: Download Files Via SWFs Using FileReference

Quick Tip: Download Files Via SWFs Using FileReference

Tutorial Details
  • Difficulty: Beginner
  • Platform: Flash (Flash Player 10)
  • Language: AS3
  • Software Used: Flash Professional CS4
  • Estimated Completion Time: 10 minutes

This Quick Tip covers how to use AS3′s FileReference class in order to download and save external files from Flash RIAs without the need for server side scripts like PHP. All we need is the path of the file that we want to let the user download.


Final Result Preview

Let’s take a look at the final result we will be working towards:


Step 1: Create a New ActionScript 3.0 File

Create a new .fla file and save it into your project folder.

new .fla file

Step 2: Prepare the UI

For this Quick Tip, I created an interface. You can download it from the link at the top of the page or you can create your own.

In my .fla file, there are three images which represent the file types, and three download buttons which are MovieClip Objects

  • btn_img_download for the miki-monk.jpg file
  • btn_mp3_download for the some-audio.mp3 file
  • btn_txt_download for the dummy-text.rtf file

and a progress bar at the bottom to track the download progress placed on the Stage.

interface of the Flash swf file

Step 3: Create Document Class

We will write our code into a Document Class file. If you are not familiar with Document Class, you can get related information from another ActiveTuts+ Quick Tip.

Let’s create our Document Class file; click File>New then select “ActionScript 3.0 Class. Save the AS file into the same location as your .fla file.

Create Document Class File

Link your .fla file to the Action Script File that you created — simply write the name of your AS file into the related field in your .fla file.

Document Class

Step 4: Using FileReference() in Our Code

Here is the Document Class that I used in this Quick Tip. Please read the comments in the code to understand the class behavior.

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.events.Event;

	public class FileRefTut extends Sprite
	{
		//Download Buttons at the Stage.We have to define them as public variables in our Document Class in order to use them.
		//Otherwise, we get error message from Flash.
		public var btn_img_download : MovieClip,
		           btn_txt_download : MovieClip,
		           btn_mp3_download : MovieClip,
		           mc_loaded        : MovieClip;

		//Progress Bar
		public var mc_progress : MovieClip,
		//Dynamic TextField stays under the Progress Bar.
				   txt_prog    : TextField;

		//Arr_Links hold the list of files.
		private var Arr_Links  : Array;

		//Default Path where the download is stored.
		//You change it according to your setup.
		//This is relative to the SWF.
		private var defaultPath : String = "assets/";

		//File Name
		private var urlName : String;

		//instance of FileReference() Class
		private var fr : FileReference;

		//url of the requested files
		private var req : URLRequest;

		public function FileRefTut() : void
		{
			//Set buttonMode to true to change mouse curser to hand icon
			btn_img_download.buttonMode = btn_txt_download.buttonMode = btn_mp3_download.buttonMode = true;

			//Set width of the mc_loaded progress bar to 0 when there isn't any downloading
			mc_loaded.scaleX = 0;

			//Create list of files to be downloaded
			//These files must be in the folder specified by defaultPath
			Arr_Links = ["miki-monk.jpg","some-audio.mp3","dummy-text.rtf"];

			//Create a request object
			req = new URLRequest();

			//Create an instance of the FileReference Class
			fr = new FileReference();

			//ProgressEvent to scale Progress Bar
			//We need to add ProgressEvent Listener based on the progress of FileReference
			fr.addEventListener( ProgressEvent.PROGRESS,progressHandler );

			//Use COMPLETE Event to determine when the download has finished
			fr.addEventListener( Event.COMPLETE,completeHandler );

			//Event Listeners for Download Buttons
			//When user clicks any download button, call downloadFile(e:MouseEvent) function
			btn_img_download.addEventListener( MouseEvent.CLICK,downloadFile );
			btn_mp3_download.addEventListener( MouseEvent.CLICK,downloadFile );
			btn_txt_download.addEventListener( MouseEvent.CLICK,downloadFile );

		}

		private function downloadFile( e : MouseEvent ) : void
		{
			//set the download path to the urlName variable according to clicked Download Button
			switch (e.target.name)
			{
				case "btn_img_download":
				urlName = Arr_Links[0];
				break;

				case "btn_mp3_download":
				urlName = Arr_Links[1];
				break;

				case "btn_txt_download":
				urlName = Arr_Links[2];
				break;
			}

			//change text message "progress" to "downloading..." at txt_prog Dynamic TextFiled
			txt_prog.text = "downloading...";

			//Assign url to the req variable
			req.url = defaultPath + urlName;

			//Downlaod requested file
			fr.download( req );
		}

		private function progressHandler( event : ProgressEvent ) : void
		{
			//We scale the progress bar according to ration of (event.bytesLoaded / event.bytesTotal)
			//So, when scaleX reaches 1, it means the download is finished..
			mc_loaded.scaleX = (event.bytesLoaded / event.bytesTotal) ;
		}

		private function completeHandler( event : Event ) : void
		{
			//reset progress bar to 0 after download is finished
			mc_loaded.scaleX = 0;

			//change text message
			txt_prog.text = "download finished";
		}
	}
}

As you can see the key is to use FileReference with a URLRequest, to enable downloading files from our server. Basically we need 3 things:

  1. Create an instance of FileReference Class
  2. private var fr : FileReference;
    
  3. Create an instance of URLRequest Class
  4. private var req : URLRequest;
    
  5. Assign the file path to the url parameter of URLRequest instance and call download method of FileReference Class
  6. req.url = defaultPath + urlName;
    fr.download( req );
    

Note: If you want to download files from another host, you have to put a crossdomain.xml file into that host. Let’s say, you put your swf file into www.host-a.com, and you want to download files from www.host-b.com with your swf file in www.host-a.com. To do that, you need permisson from www.host-b.com. So, you have to upload a crossdomain.xml file into www.host-b.com. If you wawnt learn more about crossdomain.xml files, there is another nice Quick Tip here.


Conclusion

In this Quick Tip, we learned how to download files from a server, via Flash, to the local system without any need for server side scripts like PHP. Hope you like this Quick Tip and thank you for reading it. If you have any questions, please drop a comment below.

Alp Tugan is alptugan on Activeden
Add Comment

Discussion 8 Comments

  1. Behrouz says:

    thanks a lot.
    is useful tut+ :D
    be successful.

  2. tibbi says:

    nice, great one!

  3. Rafael says:

    Thanks a lot. Thats a great tutorial. I’m trying some time to do this with flash but uploading a file to the server instead of downloading a file from the server. I know how to do it with php, asp or coldfusion but what I want to do is upload a file to the server using only swf. Did you know how to do that? Is possible that you make a tutorial about that? I really find your tutorial right to the point and easy to understand.
    Well any way I apreciate you tutorial. like Behrouz said it’s a very usefull tutorial. Thanks.

  4. Vishal says:

    Hi Alp, i follow step by step your tutorial and run the file but it doesn’t downloading file .

    i check it all but nothing happened. its only showing downloading… after 4-5 minutes.

    Please Help.

    Thanx

    • alp tugan says:
      Author

      Hi Vishal,

      Did you read the note at the end of the tutorial? If you try to download files from a different server, you’ll have to put a crossdomain file into that server.

  5. venkatnarayan b says:

    Thanks, Great!

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.