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.

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
             },

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]);
+                });
+            }
+        };
     }]);

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 ></textarea>\n";