Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Fluid File Uploader Specification


  • Currently most web applications use the standard http file browse and upload service provided with the <input type="file"> form field.
    • Issues:
      • Only one file can be selected at a time for uploaded.
      • Interface is inconsistent from browser to browser even down to the labels on the browse button.
      • The application can not specify the file type or types that are accepted in the current context.
      • The browser does not provide meaningful or consistent feedback on the upload process.
  • A number of web applications get around the standard browse and upload experience by using Flash or Java in the browser, or creating stand-alone desktop interfaces to handle file uploading. Some of these solutions work very well but do not feel integrated in with the application context, and they are difficult for the developers to modify or integrate with thier applications.

Overview of Fluid Multi-File Uploader

  • The Fluid Multi-File Uploader uses an approuch to browser-based file uploading used by Flickr and the YUI library.
  • This technique developed called SWFupload uses a small Flash object, with no user-interface of its own, to call a standard OS file open dialog that allows the user to select multiple files, and then uses the same Flash object to manage the interaction with the server to provide good progress feedback back to the user during the file upload.
  • Aside from the standard OS file dialog the interface presented to the user is done completely in HTML with Javascript talking to the SWF (Flash) object, giving the application developer much more control over the user experience.
  • Features
    • The user can select multiple files for upload using a single OS-specific file open dialog.
    • The application can specify which file types are accepted.
      • The uploader does not validate that the file actually matches the file type, that msut be done on the back end.
    • The Uploader allows the user to queue files, and start, pause, and resume the upload.
    • The Uploader provides complete progress information back to the user.
    • The user interface is completely customizable in HTML. With the exception being the OS specific file open dialog.
  • Know issues:
    • Application developers and system integrators must be careful to manage security.
    • Becuase a standard OS file open dialog is called, the all application specific feedback for the user can only given to the user before or after file browsing.


  • MultiFileUpload.js
  • MultiFileUpload.css
  • swfupload.js (version 2.1.0 beta 2)
  • swfupload_f9.swf (version 2.1.0 beta 2)

Required Dependencies

  • Fluid framework
  • jQuery 1.2.3

Optional Dependencies

  • To provide accessibility
    • Fluid jQuery accessibility plug-ins
  • To present the Uploader in a DHTML pop-up dialog
    • jQuery UI library.


  • If a http_upload_elm is provided, initialization will replace the element with either the MFU_control_elm or with the MFU_container element. If no http_upload_elm is provided then it is assumed that the File Upload html is already displayed or


  • init( settings ) - initializes an uploader: adds event handlers to the various buttons, sets up the SWFUploader object, returns the instance of the uploader. Most settings should be edited in the actual definition of the uploader.

Required Settings [no defaults]

  • upload_url :: the URL or URI of the server-side handler for the file upload
  • flash_url :: the URL or URI of the swfupload.js file

Optional Settings

  • file_size_limit :: maximum size for each file in bytes. ["20480"]

  • file_types :: accepted file types ["." // any file ]

  • file_types_text :: user-focused short description of which files are accepted ["any file"]

  • file_upload_limit : [0]

  • file_queue_limit : [0]

  • elm_MFU_container :: selector of the container for the Multi-File Uploader [#MFUpload]

  • elm_MFU_control :: selector, or HTML that is the replacement element for http_upload_elm. In the case of using the MFU in a dialog this is probably a element that contains an Add Files link or button. [default: null]

  • elm_upload :: selector of the DOM element that triggers the upload action [.MFU_UploadBtn]

  • elm_pause :: selector of the DOM element that triggers the pause action [.MFU_PauseBtn]

  • elm_browse :: selector of the DOM element that triggers the browse files action [.MFU_BrowseBtn]

  • elm_done :: selector of the DOM element that triggers the done action [.MFU_DoneBtn]

  • elm_cancel :: selector of the DOM element that triggers the cancel action [.MFU_CancelBtn]

  • when_done :: URL, URI, or function to load when the user is clicks the Done button. If empty the button dismisses the dialog or reloads the page. [null]

  • when_cancel :: URL, URI, or function to load when the user click the Cancel button. If empty the button dismisses the dialog or reloads the page. [null]

  • post_params :: usually set by the application to identify the current context for the upload [null]

  • http_upload_elm - [empty] selector of the HTML element to replace on the page with the File Upload UI [null]

  • continue_after_upload - [false] - automatically display a new URL or close the dialog when the upload is complete

  • dialog_display - [false] - display the upload

  • debug :: provides verbose debugging output both in the browser and to the console [false]

  • No labels