Drag and drop demo using the File API
+ a patch for other browsers

Demo

Drop files from desktop here

How it works

This fix works with modernizing browsers which dont support the File API drop functionality. When a dragenter event over a dropzone occurs the silverlight widget,is positioned under the mouse cursor. When a file is dropped on to the widget the silverlight triggers the standard drop event on the element.

  1. Checks whether the browser natively supports the File API
  2. Adds a silverlight object to the page and hides it by positioning it outside the window view
  3. Adds ondragenter event to the window.document and depending on...
    1. If the element contains the class "sldropzone"
    2. OR the element has an ondrop event defined which includes a reference to "files".
    Performs the following actions:
    1. The silverlight widget tracks the mouse path and persists under the users cursor
    2. Creates a javascript function called dropFile on the window object which is used by silverlight to trigger the ondrop event on the element - An example of which is in the "sample code" below.

Source

Sample Code

This page uses the sample code below.

As you may notice this is all standard HTML5 FIle API stuff to get this to work in all browsers you need to do four things.

Implement

  1. Copy source files above to your webserver
  2. <script src="slDropFile.js"></script> - Add script to the bottom of the page
  3. (e.files||e.dataTransfer.files) - Gets files from event object
  4. holder.className = "sldropzone"; - Attaches the drop handler fix to the element

Error tracking

Todo: Silverlight installation version

Working with jQuery

jQuery wraps the original event object and makes it available at e.originalEvent. This script does not recognise jQuery but does recognise the ondrop event that was assigned by jQuery and will execute that when used. However now the original event object is passed to the handler not the wrapped up event object used in jQuery. But not to worry its easy to write code which can accomodate both approaches.

jQuery Demo

Drop file jQuery Demo

Browser Support

Browser IE9 IE8 IE7 FF3.5 FF3.6 Chrome 6+ Safari 5 (win) Safari 6 (win) Opera 10
File API / slDropFile slDropFile slDropFile File API File API slDropFile File API no1
  1. Silverlight does not run in Opera, nor does Opera support the File API

Why it was done this way, rather than...