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 whethe

Answer 1

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 :(
};

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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>