How to determine presence of HTML5 drag'n'drop file upload API (like the one from FF3.6)

Question

I am writing an application that's supposed to support HTML5 drag/drop API for file, much like the on described here. I would like to perform a programmatic check on whether the browser support this kind of madness :) A solution that works for now is checking whether the browser provides a FileReader class, like this:

  if (typeof(FileReader) == "undefined") {
    $("#dropbox").hide();
  } else {
    // connect events
    $("#filebox").hide();
  }

But it is obviously not a correct one (I don't use that class at all).

Any ideas?

Solution 1

if ("files" in DataTransfer.prototype) {...}

Solution 2

Checking for the existence of FileReader is the correct way to go about this. FileReader is an official part of the File Api. I would combine this with Modernizr. Drag and Drop support is slated for release 1.2. You should be able to grab the source on GitHub and start working with this now. http://github.com/Modernizr/Modernizr/blob/master/modernizr.js

if (!!FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

If you haven't seen Dive into HTML5, you should definitely check out Mark Pilgrim's suggestions on detecting HTML5.

Solution 3

I had to make a slight change to dshaw's answer for support in IE8:

if (!!window.FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

You can try it out here

Solution 4

If you don't want to deal with Modernizr at all, you can just replicate what it does for drag'n'drop detection:

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

Got it from Modernizr GitHub repository:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

Solution 5

either use pure Modernizr approach

if (Modernizr.filereader && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

or use underlying DOM check directly but with exception handling

var featuresSupported = false;
try {
   if (!!(window.File && window.FileList && window.FileReader) && Modernizr.draganddrop)
     featuresSupported = true;
)
catch (err)
{
}

if (featuresSupported)
  <do sexy effects>
else
  <perform rollback to legacy stuff>

View more solutions