diff --git a/awx/ui/static/js/forms/Credentials.js b/awx/ui/static/js/forms/Credentials.js index 0353ceffc7..d03498e4a1 100644 --- a/awx/ui/static/js/forms/Credentials.js +++ b/awx/ui/static/js/forms/Credentials.js @@ -240,6 +240,7 @@ angular.module('CredentialFormDefinition', []) }, addRequired: false, editRequired: false, + awDropFile: true, 'class': 'ssh-key-field', rows: 10 }, diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index 3b23d9c83c..8cc70ffc40 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/awx/ui/static/lib/ansible/directives.js @@ -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]); + }); + } + }; }]); diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js index d82f082d4d..0743c2887b 100644 --- a/awx/ui/static/lib/ansible/form-generator.js +++ b/awx/ui/static/lib/ansible/form-generator.js @@ -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 >\n";