Multi-file Upload in 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://&lt;url&gt;/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