Drag-n-drop directive

Add aw-drop-file directive to a textarea form element. User can drop a file (any file) onto the field and the contents as text will be placed in the textarea. Added this directive to credentials ssh_key field.
This commit is contained in:
Chris Houseknecht 2014-07-30 18:08:38 -04:00
parent 10d0fa7631
commit ca607f2372
3 changed files with 35 additions and 0 deletions

View File

@ -240,6 +240,7 @@ angular.module('CredentialFormDefinition', [])
},
addRequired: false,
editRequired: false,
awDropFile: true,
'class': 'ssh-key-field',
rows: 10
},

View File

@ -754,4 +754,37 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
});
};
}])
//
// Support dropping files on an element. Used on credentials page for SSH/RSA private keys
// Inspired by https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
//
.directive('awDropFile', [ function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
$(element).on('dragenter', function(e) {
e.stopPropagation();
e.preventDefault();
});
$(element).on('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
});
$(element).on('drop', function(e) {
var dt, files, reader;
e.stopPropagation();
e.preventDefault();
dt = e.originalEvent.dataTransfer;
files = dt.files;
reader = new FileReader();
reader.onload = function() {
ctrl.$setViewValue(reader.result);
ctrl.$render();
};
reader.readAsText(files[0]);
});
}
};
}]);

View File

@ -739,6 +739,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'Utilities', 'ListGenerator
html += (options.mode === 'edit' && field.editRequired) ? "required " : "";
html += (options.mode === 'add' && field.addRequired) ? "required " : "";
html += (field.readonly || field.showonly) ? "readonly " : "";
html += (field.awDropFile) ? "aw-drop-file " : "";
html += (field.awRequiredWhen) ? "data-awrequired-init=\"" + field.awRequiredWhen.init + "\" aw-required-when=\"" +
field.awRequiredWhen.variable + "\" " : "";
html += "aw-watch ></textarea>\n";