1. Code
  2. JavaScript

Quick Tip: Download Files Via SWFs Using FileReference

Scroll to top
5 min read

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 fileinterface of the Flash swf fileinterface 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 FileCreate Document Class FileCreate 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.

1
2
package
3
{
4
	import flash.display.MovieClip;
5
	import flash.display.Sprite;
6
	import flash.events.MouseEvent;
7
	import flash.events.ProgressEvent;
8
	import flash.net.FileReference;
9
	import flash.net.URLRequest;
10
	import flash.text.TextField;
11
	import flash.events.Event;
12
	
13
	public class FileRefTut extends Sprite
14
	{
15
		//Download Buttons at the Stage.We have to define them as public variables in our Document Class in order to use them. 

16
		//Otherwise, we get error message from Flash. 

17
		public var btn_img_download : MovieClip,
18
		           btn_txt_download : MovieClip,
19
		           btn_mp3_download : MovieClip,
20
		           mc_loaded        : MovieClip;
21
		
22
		//Progress Bar

23
		public var mc_progress : MovieClip,
24
		//Dynamic TextField stays under the Progress Bar.

25
				   txt_prog    : TextField;
26
		
27
		//Arr_Links hold the list of files.

28
		private var Arr_Links  : Array;
29
		
30
		//Default Path where the download is stored. 

31
		//You change it according to your setup.

32
		//This is relative to the SWF.

33
		private var defaultPath : String = "assets/";
34
		
35
		//File Name

36
		private var urlName : String;
37
		
38
		//instance of FileReference() Class

39
		private var fr : FileReference;
40
		
41
		//url of the requested files

42
		private var req : URLRequest;
43
		
44
		public function FileRefTut() : void
45
		{
46
			//Set buttonMode to true to change mouse curser to hand icon

47
			btn_img_download.buttonMode = btn_txt_download.buttonMode = btn_mp3_download.buttonMode = true;
48
			
49
			//Set width of the mc_loaded progress bar to 0 when there isn't any downloading

50
			mc_loaded.scaleX = 0;
51
			
52
			//Create list of files to be downloaded

53
			//These files must be in the folder specified by defaultPath

54
			Arr_Links = ["miki-monk.jpg","some-audio.mp3","dummy-text.rtf"];
55
			
56
			//Create a request object

57
			req = new URLRequest();
58
			
59
			//Create an instance of the FileReference Class

60
			fr = new FileReference();
61
			
62
			//ProgressEvent to scale Progress Bar

63
			//We need to add ProgressEvent Listener based on the progress of FileReference

64
			fr.addEventListener( ProgressEvent.PROGRESS,progressHandler );
65
66
			//Use COMPLETE Event to determine when the download has finished

67
			fr.addEventListener( Event.COMPLETE,completeHandler );
68
69
			//Event Listeners for Download Buttons

70
			//When user clicks any download button, call downloadFile(e:MouseEvent) function

71
			btn_img_download.addEventListener( MouseEvent.CLICK,downloadFile );
72
			btn_mp3_download.addEventListener( MouseEvent.CLICK,downloadFile );
73
			btn_txt_download.addEventListener( MouseEvent.CLICK,downloadFile );
74
		
75
		}
76
		
77
		private function downloadFile( e : MouseEvent ) : void
78
		{
79
			//set the download path to the urlName variable according to clicked Download Button

80
			switch (e.target.name)
81
			{
82
				case "btn_img_download":
83
				urlName = Arr_Links[0];
84
				break;
85
				
86
				case "btn_mp3_download":
87
				urlName = Arr_Links[1];
88
				break;
89
				
90
				case "btn_txt_download":
91
				urlName = Arr_Links[2];
92
				break;
93
			}
94
			
95
			//change text message "progress" to "downloading..." at txt_prog Dynamic TextFiled

96
			txt_prog.text = "downloading...";
97
			
98
			//Assign url to the req variable

99
			req.url = defaultPath + urlName;
100
			
101
			//Downlaod requested file

102
			fr.download( req );			
103
		}
104
		
105
		private function progressHandler( event : ProgressEvent ) : void
106
		{
107
			//We scale the progress bar according to ration of (event.bytesLoaded / event.bytesTotal)

108
			//So, when scaleX reaches 1, it means the download is finished..	

109
			mc_loaded.scaleX = (event.bytesLoaded / event.bytesTotal) ;
110
		}
111
		
112
		private function completeHandler( event : Event ) : void
113
		{
114
			//reset progress bar to 0 after download is finished

115
			mc_loaded.scaleX = 0;
116
			
117
			//change text message 

118
			txt_prog.text = "download finished";
119
		}
120
	}
121
}

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. 1
    2
    private var fr : FileReference;
    
  3. Create an instance of URLRequest Class
  4. 1
    2
    private var req : URLRequest;
    
  5. Assign the file path to the url parameter of URLRequest instance and call download method of FileReference Class
  6. 1
    2
    req.url = defaultPath + urlName;
    
    3
    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.