Contact envelope



Supports native drag and drop of file(s) from the user's desktop to a Flex application via the HTML5 drag and drop API. Currently supported in most modern browsers.


This component will NOT work within the AIR environment. For HTML support in AIR, try the native mx.controls.HTML and flash.html.HTMLLoader classes.

Creating the HtmlDragDrop Component

The HtmlDragDrop component extends the HtmlFrame Component and can be added to any container that supports IVisualElementContainer.

Using the HtmlDragDrop Component

This component can accept multiple dropped files at one time. When multiple files are dropped together, the "dragLoad" event will fire for each file dropped. Drops can be cancelled via the "dragDropStarting" event.

See the Ardisia HtmlDragDropFile and HtmlDragDropEvent classes for the file information available to the Flex app during dragging and dropping.

Sample Usage:
The simplest implementation would be to listen for "dragLoad" events on the HtmlDragDrop component, and use the "file" property on the "dragLoad" event to get the HtmlDragDropFile object. The "data" property on the HtmlDragDropFile object is a ByteArray of the information contained within the dropped file. The HtmlDragDropFile object will also have the file's name, size, mime type, and last modified date information.

More advanced implementations could add progress indicators, file type checking, and error checking via the other events available. See the ASDocs for all of the events that are fired in a native drop operation.

For example, the progress of the upload is determined via the dragProgress event. This could be used to provide feedback to the user.

Drop Events:

  • dragEnter
  • dragOver
  • dragLeave
  • dragDropStarting
  • dragLoadStart
  • dragProgress
  • dragLoad

Error Handling

Multiple error events are dispatched when necessary:

  • notFoundErr
  • notReadableErr
  • abortErr
  • browserNoSupportErr
  • unknownErr


Everything may not work as expected in older browsers. For example, the HTML5 specification indicates that the user should be able to change the type of drag/drop via the "dropEffect" and "effectAllowed" properties, but these are only observed by Chrome. Also, Firefox may not handle native cursors properly during drag / drop operations.

Additional Notes

  • The drop cannot be cancelled in the browser; it can only be cancelled via Flex.
  • Reading in the data as a binary string or text does not work; however readAsDataURL does work and the data comes down encoded as a base 64 string that this class decodes to a ByteArray.
  • Most of the processing time is for Flex to decode the data, not for the browser to encode the data.
  • The Flex base 64 decoder is rather slow... may be faster to do the decoding in Javascript.


Dragging files out to the desktop from the browser is only possible in Chrome, so wait to implement when the ability is more cross browser; see:

Custom HtmlDragDropEvent Event

Dispatched when the user drags over the component.

Dispatched continuously when the user is dragging over the component.

Dispatched when the user drags out of the component.

Dispatched immediately after a drop is initiated over the component. Can be cancelled to prevent the drop. The first drop event to fire.

Dispatched when a drop file is initially being read into memory.

Dispatched when a drop is aborted.

Dispatched when a drop file is initially being read into memory.

Dispatched when a dropped file has been fully processed by both Javascript and Actionscript and is available as a ByteArray.

Custom HtmlDragDropErrorEvent Event

Dispatched when the dropped file was not found by the browser.

Dispatched when the dropped file was not readable by the browser.

Dispatched when the dropped file was being read into a data buffer, but was aborted.

Dispatched when the browser does not support file drag and drop.

Dispatched when the error was unknown.


See the HtmlDragDrop demo application for additional example code.

Back To Top