Introduce draganddrop feature detection and add it to FileDragAndDropDialog

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -4,6 +4,8 @@ import React from 'react';
 import Router from 'react-router';
 
 import { getLangText } from '../../../utils/lang_utils';
+import { dragAndDropAvailable } from '../../../utils/feature_detection_utils';
+
 
 let Link = Router.Link;
 
@@ -24,6 +26,17 @@ let FileDragAndDropDialog = React.createClass({
 
     mixins: [Router.State],
 
+    getDragDialog(fileClass) {
+        if(dragAndDropAvailable) {
+            return [
+                <p>{getLangText('Drag %s here', fileClass)}</p>,
+                <p>{getLangText('or')}</p>
+            ];
+        } else {
+            return null;
+        }
+    },
+
     render() {
         const queryParams = this.getQuery();
 
@@ -64,8 +77,7 @@ let FileDragAndDropDialog = React.createClass({
                 if(this.props.multipleFiles) {
                     return (
                         <span className="file-drag-and-drop-dialog">
-                            <p>{getLangText('Drag %s here', this.props.fileClassToUpload.plural)}</p>
-                            <p>{getLangText('or')}</p>
+                            {this.getDragDialog(this.props.fileClassToUpload.plural)}
                             <span
                                 className="btn btn-default"
                                 onClick={this.props.onClick}>
@@ -78,8 +90,7 @@ let FileDragAndDropDialog = React.createClass({
 
                     return (
                         <span className="file-drag-and-drop-dialog">
-                            <p>{getLangText('Drag a %s here', this.props.fileClassToUpload.singular)}</p>
-                            <p>{getLangText('or')}</p>
+                            {this.getDragDialog(this.props.fileClassToUpload.singular)}
                             <span
                                 className="btn btn-default"
                                 onClick={this.props.onClick}>

js/utils/feature_detection_utils.js

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * PLEASE
+ *
+ * postfix your function with '-Available'.
+ *
+ * Like this:
+ *
+ * featureNameAvailable
+ *
+ */
+
+
+/**
+ * Even though it is not recommended to check (and maintain) the used browser,
+ * we're checking the browser's ability to drag and drop with this statement as
+ * there is no other way of detecting it another way.
+ *
+ * See this discussion for clarity:
+ *     - https://github.com/Modernizr/Modernizr/issues/57#issuecomment-35831605
+ *
+ * @type {bool} Is drag and drop available on this browser
+ */
+export const dragAndDropAvailable = 'draggable' in document.createElement('div') &&
+    !/Mobile|Android|Slick\/|Kindle|BlackBerry|Opera Mini|Opera Mobi/i.test(navigator.userAgent);