Multi-file Upload in FLEX - apache-flex

Question

Is there a FLEX component that uploads multiple files in a multipart/form-data POST request?

Answer 1

You can use FileReference (1 file) or FileReferenceList (multiple files) for uploading multiple files.
Maybe you can find some inspiration on this page: http://soegianto.com/blog/2008/07/multiple-file-upload-with-flex-and-php/

Answer 2

If you're looking for a quick example using Flex and .NET:
Uploader.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()" >
<mx:Script>
<![CDATA[
import flash.net.URLRequest;
private var __file:FileReference;
private function initApp():void
{
__file = new FileReference();
__file.addEventListener(Event.SELECT , __fileSelectionHandler);
__file.addEventListener(Event.COMPLETE , __completeHandler );
__file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, __uploadDataHandler );
}
private function __onBrowse():void
{
try
{
var success:Boolean = __file.browse();
}
catch (error:Error)
{
__status__.text = "Status: Unable to open browse dialog";
}
}
private function __onUpload():void
{
// replace with URL to your upload handler - THIS ONE WON'T WORK!!!!
var myRequest:URLRequest = new URLRequest("http://<url>/Uploader.ashx");
myRequest.method = URLRequestMethod.POST;
try
{
__file.upload(myRequest);
__status__.text = "Status: Now uploading " + __file.name + " ... ";
}
catch (error:Error)
{
__status__.text = "Status: Error uploading " + __file.name;
}
}
private function __fileSelectionHandler(_e:Event):void
{
__upload__.enabled = true;
__uploadFile__.text = __file.name;
__status__.text = "Status: Click 'Upload' to begin file upload";
}
private function __completeHandler(_e:Event):void
{
// nothing currently done in this handler - experiment and have fun :)
}
private function __uploadDataHandler(_e:DataEvent):void
{
var myResult:XML = new XML(_e.data);
__status__.text = "File Upload Complete \n" + myResult.toString();
}
]]>
</mx:Script>
<mx:TextArea width="300" height="90" id="__status__" wordWrap="true" editable="false" enabled="true" text="Status: Select file to upload"/>
<mx:HBox width="300" height="20" horizontalAlign="center">
<mx:TextInput id="__uploadFile__" editable="false" enabled="true"/>
<mx:Button label="Browse" id="__browse__" enabled="true" click="__onBrowse()"/>
</mx:HBox>
<mx:HRule width="300"/>
<mx:Button label="Upload" id="__upload__" enabled="false" click="__onUpload()"/>
</mx:Application>
Uploader.ashx:
<%# WebHandler Language="C#" Class="Uploader" %>
using System.IO;
using System.Web;
using System.Web.Configuration;
public class Uploader : IHttpHandler
{
public void ProcessRequest( HttpContext _context )
{
// not very elegant - change to full path of your upload folder (there are no upload folders on my site)
string uploadDir = "C:\\<path to upload folder>\\";
if (_context.Request.Files.Count == 0)
{
_context.Response.Write("<result><status>Error</status><message>No files selected</message></result>");
return;
}
foreach(string fileKey in _context.Request.Files)
{
HttpPostedFile file = _context.Request.Files[fileKey];
file.SaveAs(Path.Combine(uploadDir, file.FileName));
}
_context.Response.Write("<result><status>Success</status><message>Upload completed</message></result>");
}
public bool IsReusable
{
get { return true; }
}
}
Note that this is basically just a transcription of the Algorithmist's Post from '07

Answer 3

You can only upload one at a time with the Flex classes. If you want more than one in the same upload request, try MultipartURLLoader:
http://code.google.com/p/in-spirit/wiki/MultipartURLLoader