How can I determine if the browser is able to receive files using drag and drop

Question

I know how to define drag & drop API, I know how to detect functions FileReaderand FileList. The problem is that modern mobile browsers can handle all these things, but they obviously do not allow you to drop files on a page.

I have an area on the page where the user can drop files, and I want to hide this area on devices that do not support this.

Answer 1

Modernizr https://github.com/Modernizr/Modernizr/issues/57 . - navigator.userAgent.

Answer 2

, Modernizr, html5.

UPDATE:

, HTML5 FileReader. , , onload() , drop . DIV , "dragover" "dragenter":

if(window.FileReader) {

: http://www.htmlgoodies.com/html5/javascript/drag-files-into-the-browser-from-the-desktop-HTML5.html#fbid=rxWgmrkH83W

, drag and drop :

if(Modernizr.draganddrop) {

javascript ( Modernizr):

var isEventSupported = (function() {

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

      function isEventSupported( 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" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
          if ( !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;
    })();

:

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

API :

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

:

• http://modernizr.com/docs/
• Qaru , --support-file-api-drag-n-drop