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

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 d开发者_Go百科on't use that class at all).

Any ideas?

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.

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

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

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

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>

This code fails in IE8. This would probably be better:

if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
  alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');
}

Its a bit trickier. iOS7 reports that it supports both FileReader and draganddrop pictures uploading. Since I was looking for a more general file upload that I couldn't do with iOS, I needed another answer.

Modernizr issue 57 at here talks about the issue. Now with windows 8 and both touch and mouse, its tricky. There's code in the middle by chriskeeble that I used successfully. It relies on Modernizr and agent detection.