How To Detect Browser Support File Api Drag N Drop

I like to add a background on a div only for browsers which support drag & drop for files I don't like to use modernizr though, just a one line script

Solution 1:

Why not just copy required parts from Modernizr?

var isEventSupported = (function() {

      varTAGNAMES = {
        'select': 'input', 'change': 'input',
        'submit': 'form', 'reset': 'form',
        'error': 'img', 'load': 'img', 'abort': 'img'
      };

      functionisEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || 'div');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" thosevar isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic elementif ( !element.setAttribute ) {
            element = document.createElement('div');
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, '');
            isSupported = typeof element[eventName] == 'function';

            // If property was created, "remove it" (by setting value to `undefined`)if ( typeof element[eventName] != 'undefined' ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })();

Usage:

if (isEventSupported('dragstart') && isEventSupported('drop')) {
  ...
}

And for File API:

var isFileAPIEnabled = function() {
  return !!window.FileReader;
};

Solution 2:

You can use:

return 'draggable' in document.createElement('span') && typeof(window.FileReader) != 'undefined';

Solution 3:

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

checkout modernizr source code technique for the HTML5 drag and drop detection https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

Solution 5:

except this seems to incorrectly detect iOS as supporting drag and drop