[FileUpload] Enhance file-upload directive

src/plugins/kibana/public/settings/sections/objects/_objects.html

@@ -3,7 +3,11 @@
     <div class="header">
       <h2 class="title">Edit Saved Objects</h2>
       <button class="btn btn-default controls" ng-click="exportAll()"><i aria-hidden="true" class="fa fa-download"></i> Export Everything</button>
-      <button file-upload="importAll(fileContents)" class="btn btn-default controls" ng-click><i aria-hidden="true" class="fa fa-upload"></i> Import</button>
+      <file-upload on-read="importAll(fileContents)" upload-selector="button.upload">
+        <button class="btn btn-default controls upload" ng-click>
+          <i aria-hidden="true" class="fa fa-upload"></i> Import
+        </button>
+      </file-upload>
     </div>
     <p>
       From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.

src/ui/public/directives/file_upload.js

@@ -1,32 +1,80 @@
+import _ from 'lodash';
 import $ from 'jquery';
 import uiModules from 'ui/modules';
 let module = uiModules.get('kibana');
 
-module.directive('fileUpload', function ($parse) {
+let html = '<span class="dropzone" ng-transclude></span>';
+
+module.directive('fileUpload', function () {
   return {
-    restrict: 'A',
+    restrict: 'E',
+    transclude: true,
+    scope: {
+      onRead: '&',
+      onLocate: '&',
+      uploadSelector: '@'
+    },
+    template: html,
     link: function ($scope, $elem, attrs) {
-      let onUpload = $parse(attrs.fileUpload);
+      let $button = $elem.find($scope.uploadSelector);
+      let $dropzone = $elem.find('.dropzone');
 
-      let $fileInput = $('<input type="file" style="opacity: 0" id="testfile" />');
-      $elem.after($fileInput);
+      const handleFile = (file) => {
+        if (_.isUndefined(file)) return;
 
-      $fileInput.on('change', function (e) {
-        let reader = new FileReader();
-        reader.onload = function (e) {
-          $scope.$apply(function () {
-            onUpload($scope, {fileContents: e.target.result});
-          });
-        };
+        if ($scope.onRead) {
+          let reader = new FileReader();
+          reader.onload = function (e) {
+            $scope.$apply(function () {
+              $scope.onRead({fileContents: e.target.result});
+            });
+          };
+          reader.readAsText(file);
+        }
 
-        let target = e.srcElement || e.target;
-        if (target && target.files && target.files.length) reader.readAsText(target.files[0]);
-      });
+        if ($scope.onLocate) {
+          $scope.onLocate({ file });
+        }
+      };
+
+      $dropzone.on('dragover', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      );
+
+      $dropzone.on('dragenter', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      );
 
-      $elem.on('click', function (e) {
-        $fileInput.val(null);
-        $fileInput.trigger('click');
+      $dropzone.on('drop', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const file = _.get(e, 'originalEvent.dataTransfer.files[0]');
+
+        if (file) {
+          handleFile(file);
+        }
       });
+
+      if ($button) {
+        const $fileInput = $('<input type="file" style="opacity: 0; position:absolute; right: -999999999px" id="testfile" />');
+        $elem.append($fileInput);
+
+        $fileInput.on('change', function (e) {
+          let target = e.srcElement || e.target;
+          if (_.get(target, 'files.length')) {
+            handleFile(target.files[0]);
+          }
+        });
+
+        $button.on('click', function (e) {
+          $fileInput.val(null);
+          $fileInput.trigger('click');
+        });
+      }
     }
   };
 });