The EAFlashUpload is a set of Flash movie files: EAFUpload.swf, TableView.swf, ShortView.swf, ListView.swf
- EAFUpload.swf – core of component. It manages upload process, loads user interface and provides JavaScript API at the container page;
- TableView.swf, ShortView.swf, ListView.swf – various representations of user interface;
For successesful work you just need two files: EAFUpload.swf and swf file of apropriate user interface. Also if you want to implement your own DHTML/JavaScript interface then you just need EAFUpload.swf file (see also overlayModePlaceholder property). It provides advanced JavaScript API for component management.
Create simple upload solution
Summary:
- Create simple html page.
- Embed EAFlashUpload to just created page.
- Configure EAFlashUpload to sending files to appropriate script.
- Server side scripts example.
Let's begin. Create a blank html page as follows:
The EAFlashUpload is a client-side control, so it doesn't matter what platform you are using on the server (ASP.NET, PHP, ASP etc). Below example describes how to integrate EAFlashUpload at the HTML page but the same code you can use to integrate EAFlashUpload to ASP.NET page, PHP page etc. 2. Embed EAFlashUpload to html page.<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test upload page</title> </head> <body> </body> </html>
The EAFlashUpload is a flash movie so it can be integrated into page by using standart method. The basic way how to integrate swf movie into page is usage of <OBJECT> <EMBED> html tags. But there is more handy solution: SWFObject JavaScript library (recommended). It allows to integrate flash movie with minimum html code, so your page will have more structured logic. Below we will demonstrate the both methods but in other documentation all code snippets provided with assumption that SWFObject is used for integration.
-
SWFObject. Place below code inside <body> tag:
<div id="EAFlashUpload_placeholder"></div> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var params = { wmode: "window" }; var attributes = { id: "EAFlashUpload", name: "EAFlashUpload" }; var flashvars = new Object(); flashvars["uploader.uploadUrl"] = "uploadfiles.aspx"; flashvars["viewFile"] = "TableView.swf"; swfobject.embedSWF("EAFUpload.swf", "EAFlashUpload_placeholder", "450", "350", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script>
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) has five required and four optional arguments:- swfUrl (String, required) specifies the URL of your SWF
- id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content
- width (String, required) specifies the width of your SWF
- height (String, required) specifies the height of your SWF
- version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release")
- expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activates Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
- flashvars (Object) The main point of EAFlashUpload configuration. This object is used to specify EAFlashUpload properties value on the initialization stage. See below for more explanation.
- params (Object, optional) specifies your nested object element params with name:value pairs
-
<OBJECT> and <EMBED> tags.
<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>
3. EAFlashUpload configuration.
Take a look to part of above example:
flashvars - JavaScript object is used for specifying demanded values for EAFlashUpload properties. Actually you create a new field inside flashvars with name and value of appropriate property and then SWFObject pass this value to flash movie. EAFlashUpload using object reference string as a property name. "uploader.uploadUrl" means that you set "uploadUrl" property of "uploader" object inside EAFUpload.swf. More about objects structure you can read here: Objects structure.var attributes = { id: "EAFlashUpload", name: "EAFlashUpload" }; var flashvars = new Object(); flashvars["uploader.uploadUrl"] = "uploadfiles.aspx"; flashvars["viewFile"] = "TableView.swf";
Initialization of uploader.uploadUrl and viewFile properties is minimum requirements for successful work.
- uploader.uploadUrl – URL to receiver script that process uploading files on the server. The script should be configured to receiving POST request with "multipart/form-data" MIME type. In other words the script should have a possibility to receive files that is submitted as part of html form (<input type="file" /> form element)
- viewFile – name of .swf file that contains demanded user interface. EAFUpload.swf loads specified swf file and retrieve UI from it. There are three different user interfaces(TableView.swf, ListView.swf, ShortView.swf).
There are several ways how EAFlashUpload can be configured (flashvars object, XML, via JavaScript at the runtime). Read more here EAFlashUpload configuration.
4. Example of server side scripts.
Here we provide a posible variant of server side scripts for receiving files.
ASP.NET:
PHP:<%@ Page language="c#"%> <% // Define a location on the server where uploaded file will be stored. string FolderToSave = Server.MapPath("") + "\\UploadedFiles\\"; if(Request.Files != null && Request.Files.Count > 0) { HttpPostedFile uploadeFile = Request.Files[0]; uploadeFile.SaveAs(FolderToSave + System.IO.Path.GetFileName(uploadeFile.FileName)); Response.Write("File " + uploadeFile.FileName + " is succesfully uploaded."); } else Response.Write("You have not selected any file!"); %>
<?PHP $uploaddir = 'C:\\UploadedFiles\\'; $target_encoding = "ISO-8859-1"; if ( count($_FILES) > 0 ) { foreach($_FILES as $fileName=>$file) { if ( $file['error'] != UPLOAD_ERR_OK ) { switch( $file['error'] ) { case UPLOAD_ERR_INI_SIZE: echo "PHP Settings doesn't allow such file size"; break; case UPLOAD_ERR_FORM_SIZE: echo "Uploader didn't allow such file size"; break; case UPLOAD_ERR_PARTIAL: echo "Uploaded file hasn't been complete uploaded"; break; case UPLOAD_ERR_NO_FILE: echo "File hasn't been uploaded"; break; } break; } $uploadfile = $uploaddir . mb_convert_encoding( basename($file['name']), $target_encoding , 'UTF-8' ); if ( move_uploaded_file( $file['tmp_name'], $uploadfile ) ) { echo "Upload was successful"; } else { echo "Can't move file from temporary directory to destination"; } } } else { echo "Request didn't contain the file"; } ?>
Add EAFlashUpload to existing solution.
The EAFlashUpload is a client-side control, so it doesn't matter what platform you are using on the server (ASP.NET, PHP, ASP etc). If you have a solution that allows upload files to the server via form element <INPUT type="file" /> then it can be easy modified to using EAFlashUpload. You don't need to change server-side code, just embed EAFlashUpload to your html code and follow instructions in Create simple upload solution section with one exception: you don't need to create additional page just add embedding code of EAFlashUpload to your existing page(html, aspx, php, cfm etc.).
If you need to send some form fields values with file then you can use uploader.fromToSend property. EAFlashUpload automatically parse specified form and sends values with files.
Work with JavaScript API.
The EAFlashUpload provides flexible way to manage component at the runtime. It is JavaScript API. There are a lot of methods and events that allows you control upload process, receive progress information, manage files in the upload queue. You can find more related information in the JavaScript API reference:
Understanding of upload process.
The files are sent to the server via POST request with "multipart/form-data" MIME type. The upload request is performed in compliance with RFC 1867 ("Form-based File Upload in HTML". http://www.ietf.org/rfc/rfc1867.txt).
All files is sent one by one in separate requests. It is Flash API singularity. Keep in mind that the server script which receives files is executed for each file in the upload queue. If you define a HTML Form for parsing(uploader.fromToSend property) then form fields values will be sent as many times how many files in the upload queue. You can change this behaviour by handling events via JavaScript API(see also "UploadDescription.html" example in the distribution package).
All request are performed via asynchronous requests without page reload. The upload can be initialized by pressing "Upload" button inside user interface(see description of appropriate UI) or by calling uploadFiles() method of JavaScript API.