The EAFlashUpload provides a height level of customization. There are many properties allows to define a various behavior of the component. Almost all graphical elements can be fully customized. Size, position, colors for different state, gradient colors, borders, texts, visibility etc is changeable.
The component can be configured by three ways: via XML, via html code, via JavaScript API. The main point of configuration is a string reference to the objects properties. If configuration is defined via XML then an object name acts as a XML node and the object properties act as attributes of the XML node. If configuration is defined via JavaScrip API reference to the object propeerties may be as follows: "objName.objProp". Let's see examples of various configuration types:
- via XML file - to link to this file set configFile property.
<?xml version="1.0" encoding="UTF-8"?> <EAFlashUpload activeLanguage="eng" viewFile="TableView.swf"> <localization> <eng .... view.addButton.label="Choose files" /> <spanish .... view.addButton.label="Elegir los files" /> </localization> <uploader uploadUrl="uploadfiles.aspx" /> <queue filesCountLimit="30" /> <view> <filesList> <columnsStyle headerBackgroundUpColor ="#fdfdfe|#BCC8CF" headerBackgroundOverColor ="#fdfdfe|#BCC8CF" headerBackgroundDownColor ="#6dbdd1|#f4f8fc" cellFontColor = "#000000" cellFontSize = "12" cellFontName = "_sans" cellFontBold = "false" cellFontItalic = "false" cellFontUnderline = "false" cellTextAlign = "left" /> </filesList> <addButton enabled="true"/> <uploadButton enabled="false"/> <cancelButton enabled="true" visible="false"/> ... </view> </EAFlashUpload> -
via flashvars object of SWFObject object:
<html> <head> <title>EAFlashUpload example</title> </head> <body> <div id="EAFlashUpload_holder"> Alternative content. </div> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var params = { BGcolor: "#ffffff", wmode: "window" }; var attributes = { id: "EAFlashUpload", name: "EAFlashUpload" }; var flashvars = new Object(); flashvars["configFile"] = "configuration.xml"; flashvars["activeLanguage"] = "eng"; flashvars["viewFile"] = "TableView.swf"; flashvars["uploader.uploadUrl"] = "uploadfiles.aspx"; flashvars["queue.filesCountLimit"] = "30"; flashvars["view.filesList.columnsStyle.headerBackgroundUpColor"] = "#fdfdfe|#BCC8CF"; ... flashvars["view.addButton.label"] = "Choose files"; swfobject.embedSWF("EAFUpload.swf", "EAFlashUpload_holder", "450", "350", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script> </body> </html> -
via FlashVars parameter of <object> and <embed> tag:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>EAFlashUpload example</title> </head> <body> <OBJECT id="EAFlashUpload" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="450" height="350" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" VIEWASTEXT> <!-- Replace symbols "&" with the "%26" at URL values! The same parameters values should be set for EMBED object below. --> <PARAM NAME="FlashVars" VALUE="uploader.uploadUrl=uploadfiles.php&viewFile=TableView.swf"> <PARAM NAME="BGColor" VALUE="#FFFFFF"> <PARAM NAME="Movie" VALUE="EAFUpload.swf"> <PARAM NAME="Src" VALUE=" EAFUpload.swf"> <PARAM NAME="WMode" VALUE="Window"> <PARAM NAME="Play" VALUE="-1"> <PARAM NAME="Loop" VALUE="-1"> <PARAM NAME="Quality" VALUE="High"> <PARAM NAME="SAlign" VALUE=""> <PARAM NAME="Menu" VALUE="-1"> <PARAM NAME="Base" VALUE=""> <PARAM NAME="AllowScriptAccess" VALUE="always"> <PARAM NAME="Scale" VALUE="ShowAll"> <PARAM NAME="DeviceFont" VALUE="0"> <PARAM NAME="EmbedMovie" VALUE="0"> <PARAM NAME="SWRemote" VALUE=""> <PARAM NAME="MovieData" VALUE=""> <PARAM NAME="SeamlessTabbing" VALUE="1"> <PARAM NAME="Profile" VALUE="0"> <PARAM NAME="ProfileAddress" VALUE=""> <PARAM NAME="ProfilePort" VALUE="0"> <!-- Embed for Netscape,Mozilla/FireFox browsers support. Flashvars parameters are the same.--> <!-- Replace symbols "&" with the "%26" at URL values! --> <embed bgcolor="#FFFFFF" id="EmbedEAFlashUpload" src=" EAFUpload.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="350" flashvars="uploader.uploadUrl=uploadfiles.php&viewFile=TableView.swf" > </embed> </OBJECT> </body> </html> -
The component can be configured dinamicaly at the runtime by EAFlashUpload JavaScript API:
<html> <head> <title>EAFlashUpload example</title> <script type="text/javascript" src="swfobject.js"></script> </head> <body> <div id="EAFlashUpload_holder"> Alternative content. </div> <script type="text/javascript"> var params = { BGcolor: "#ffffff", wmode: "window" }; var attributes = { id: "EAFlashUpload", name: "EAFlashUpload" }; var flashvars = new Object(); flashvars["viewFile"] = "TableView.swf"; swfobject.embedSWF("EAFUpload.swf", "EAFlashUpload_holder", "450", "350", "9.0.0", "expressInstall.swf", flashvars, params, attributes); function EAFlashUpload_onMovieLoad(errors) { EAFlashUpload.setProperty("activeLanguage", "eng"); EAFlashUpload.setProperty("uploader.uploadUrl", "uploadfiles.aspx"); EAFlashUpload.setProperty("queue.filesCountLimit", 30); EAFlashUpload.setProperty("view.filesList.columnsStyle.headerBackgroundUpColor", ["#fdfdfe", "#BCC8CF"]); ... EAFlashUpload.setProperty("view.addButton.label", "Choose files"); } </script> </body> </html>
You can to specify part of configuration on the page and part in the XML configuration file, in this case property defined on the page has more priority and overloads value that defined in the XML configuration file.
We recomend using SWFObject for embedding the EAFlashUpload on the page instead of using standard <object> and <embed> tags.
Data types:
The following table describes data type usage for different ways of configuration.
Data type | XML file | SWFObject | <object> tag | JavaScript API |
---|---|---|---|---|
String | String | String | String | String |
Integer | String. Ex: <queue filesCountLimit="30" /> |
Integer. Ex: flashvars["queue.filesCountLimit"] = 30 |
String. Ex: <param name="FlashVars" value="queue.filesCountLimit=30"/> |
Integer. Ex: EAFlashUpload.setProperty("queue.filesCountLimit", 30); |
Boolean | String. Ex: <queue filteredFileSelection="true" /> |
Boolean. Ex: flashvars["queue.filteredFileSelection"] = true |
String. Ex: <param name="FlashVars" value="queue.filteredFileSelection=30"/> |
Boolean. Ex: EAFlashUpload.setProperty("queue.filesCountLimit", 30); |
Array | String. Ex: <queue allowedExtensions="All files:*.*|Images (*.gif, *.jpg, *.png):*.jpg;*.gif;*.png" /> |
String. Ex: flashvars["queue.allowedExtensions"] = "All files:*.*|Images (*.gif, *.jpg, *.png):*.jpg;*.gif;*.png" |
String. Ex: <param name="FlashVars" value="queue.allowedExtensions=All files:*.*|Images (*.gif, *.jpg, *.png):*.jpg;*.gif;*.png"/> |
Array. Ex: EAFlashUpload.setProperty("queue.allowedExtensions", ["All files:*.*", "Images (*.gif, *.jpg, *.png):*.jpg;*.gif;*.png"]; |
Requirements related to assigning values:
- Array spicified as a string - different value should be delimited by pipe "|" as follows: "somevalue1|somavalue2"
- Colors - standard HTML RGB codes in hexidecimal with "#" prefix. Almost all elements of UI support a gradient fill. You can define gradient vestro as follows: "#ffffff|#ffff00|#181818". The colors array may contain 15 different colors.
- customFileProperties - some of characters should be encoded in values as follows: | to %7C , : to %3A , & to %26 , = to %3D
- other string values - & should be encoded to %26