github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6842 from Bargs/feature/dragNDropFileUpload

Browse source 
[FileUpload] Enhance file-upload directive
This commit is contained in:
Matt Bargar 2016-04-28 16:59:12 -04:00
commit 7ab47405f0
2 changed files with 71 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/plugins/kibana/public/settings/sections/objects/_objects.html
View file

@ -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.

84
src/ui/public/directives/file_upload.js
View file

@ -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();
}
);
$dropzone.on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
const file = _.get(e, 'originalEvent.dataTransfer.files[0]');
if (file) {
handleFile(file);
}
});
$elem.on('click', function (e) {
$fileInput.val(null);
$fileInput.trigger('click');
});
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');
});
}
}
};
});