What is EAFlashUpload?

The EAFlashUpload is a set of Flash movie files: EAFUpload.swf, TableView.swf, ShortView.swf, ListView.swf


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:

1. Create simple html page.

Let's begin. Create a blank html page as follows:

		
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test upload page</title> </head> <body> </body> </html>
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.

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.

Above example supposes that EAFUpload.swf, TableView.swf, .html, uploadfiles.aspx and swfobject.js files are placed inside the same virtual path on your web server (ex: http://localhost/EAFlashUpload/).


3. EAFlashUpload configuration.

Take a look to part of above example:

		
var attributes = { id: "EAFlashUpload", name: "EAFlashUpload" }; var flashvars = new Object(); flashvars["uploader.uploadUrl"] = "uploadfiles.aspx"; flashvars["viewFile"] = "TableView.swf";
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.
Initialization of uploader.uploadUrl and viewFile properties is minimum requirements for successful work. A couple words about id and name fields of attributes object. Here we specify identifier of EAFlashUpload JavaScript DOM element. The value of this fields is used for referencing to EAFlashUpload JavaScript API. You can specify any name as you like (ex: FlashUploader then to call some EAFlashUpload javascript method you should use the following code: FlashUploader.<method name>. Ex: FlashUploader.uploadFiles().).

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:

        
<%@ 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:
        
<?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:

The EAFlashUpload provides possibility to hide a control. It may be very usfull if you want to build your own DHTML/JavaScript user interface. See description of overlayModePlaceholder property to get more information.



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.