From 9e4f4099f8da9b21b3840ab14b0b4527c5fbfee3 Mon Sep 17 00:00:00 2001
From: Matthew Bargar <mbargar@gmail.com>
Date: Thu, 17 Mar 2016 17:08:01 -0400
Subject: [PATCH 1/2] [FileUpload] Enhance file-upload directive

Adding features for Add Data CSV usecase;

* Drag and drop support
* Gives parent access to File object
* Moved from attribute to element type directive to allow custom content
* Hide the file input better
---
 .../settings/sections/objects/_objects.html   |  6 +-
 src/ui/public/directives/file_upload.js       | 84 +++++++++++++++----
 2 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/src/plugins/kibana/public/settings/sections/objects/_objects.html b/src/plugins/kibana/public/settings/sections/objects/_objects.html
index 867a26ee44f30..78a7ff0094665 100644
--- a/src/plugins/kibana/public/settings/sections/objects/_objects.html
+++ b/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)">
+        <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.
diff --git a/src/ui/public/directives/file_upload.js b/src/ui/public/directives/file_upload.js
index 2283f34319daa..b0837e0069f3a 100644
--- a/src/ui/public/directives/file_upload.js
+++ b/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: '&',
+      label: '='
+    },
+    template: html,
     link: function ($scope, $elem, attrs) {
-      let onUpload = $parse(attrs.fileUpload);
+      let $button = $elem.find('.upload');
+      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');
+        });
+      }
     }
   };
 });

From 6fce94e110a916c210d2d7d77425817b197123b2 Mon Sep 17 00:00:00 2001
From: Matthew Bargar <mbargar@gmail.com>
Date: Wed, 27 Apr 2016 18:51:19 -0400
Subject: [PATCH 2/2] [FileUpload] Make upload button selector configurable

---
 .../kibana/public/settings/sections/objects/_objects.html     | 2 +-
 src/ui/public/directives/file_upload.js                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/kibana/public/settings/sections/objects/_objects.html b/src/plugins/kibana/public/settings/sections/objects/_objects.html
index 78a7ff0094665..550ef9aec945f 100644
--- a/src/plugins/kibana/public/settings/sections/objects/_objects.html
+++ b/src/plugins/kibana/public/settings/sections/objects/_objects.html
@@ -3,7 +3,7 @@
     <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>
-      <file-upload on-read="importAll(fileContents)">
+      <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>
diff --git a/src/ui/public/directives/file_upload.js b/src/ui/public/directives/file_upload.js
index b0837e0069f3a..03fb7137806d8 100644
--- a/src/ui/public/directives/file_upload.js
+++ b/src/ui/public/directives/file_upload.js
@@ -12,11 +12,11 @@ module.directive('fileUpload', function () {
     scope: {
       onRead: '&',
       onLocate: '&',
-      label: '='
+      uploadSelector: '@'
     },
     template: html,
     link: function ($scope, $elem, attrs) {
-      let $button = $elem.find('.upload');
+      let $button = $elem.find($scope.uploadSelector);
       let $dropzone = $elem.find('.dropzone');
 
       const handleFile = (file) => {