HtmlDragDrop

Overview

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.

AIR

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:
Simple:
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

Considerations

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.

TODOs

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: http://www.thecssninja.com/javascript/gmail-dragout

Custom HtmlDragDropEvent Event

DRAG_ENTER
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when the user drags over the component.

DRAG_OVER
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched continuously when the user is dragging over the component.

DRAG_LEAVE
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when the user drags out of the component.

DRAG_DROP_STARTING
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched immediately after a drop is initiated over the component. Can be cancelled to prevent the drop. The first drop event to fire.

DRAG_PROGRESS
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when a drop file is initially being read into memory.

DRAG_ABORT
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when a drop is aborted.

DRAG_LOAD_START
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when a drop file is initially being read into memory.

DRAG_LOAD
ardisia.components.htmlDragDrop.events.HtmlDragDropEvent
Dispatched when a dropped file has been fully processed by both Javascript and Actionscript and is available as a ByteArray.

Custom HtmlDragDropErrorEvent Event

NOT_FOUND_ERR
ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent
Dispatched when the dropped file was not found by the browser.

NOT_READABLE_ERR
ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent
Dispatched when the dropped file was not readable by the browser.

ABORT_ERR
ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent
Dispatched when the dropped file was being read into a data buffer, but was aborted.

BROWSER_NO_SUPPORT_ERR
ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent
Dispatched when the browser does not support file drag and drop.

UNKNOWN_ERR
ardisia.components.htmlDragDrop.events.HtmlDragDropErrorEvent
Dispatched when the error was unknown.

Example

See the HtmlDragDrop demo application for additional example code.

Back To Top