GUAC-928 Added file transfer support.

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -67,6 +67,19 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         0x0308: true,
         0x031D: true
     };
+    
+    /**
+     * The reconnect action to be provided along with the object sent to
+     * showStatus.
+     */
+    var RECONNECT_ACTION = {
+        name        : "client.action.reconnect",
+        // Handle reconnect action
+        callback    : function reconnectCallback() {
+            $scope.id = uniqueId;
+            $scope.showStatus(false);
+        }
+    };
 
     // Get DAO for reading connections and groups
     var connectionGroupDAO = $injector.get('connectionGroupDAO');
@@ -215,7 +228,7 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             className: "error",
             title: "client.error.connectionErrorTitle",
             text: "client.error.clientErrors." + errorName,
-            actions: [ "client.action.reconnect" ]
+            actions: [ RECONNECT_ACTION ]
         });
 
     });
@@ -250,19 +263,11 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
             className: "error",
             title: "client.error.connectionErrorTitle",
             text: "client.error.tunnelErrors." + errorName,
-            actions: [ "client.action.reconnect" ]
+            actions: [ RECONNECT_ACTION ]
         });
 
     });
 
-    // Handle reconnect action
-    $scope.$on('guacAction', function actionListener(event, action) {
-
-        if (action === "client.action.reconnect")
-            $scope.id = uniqueId;
-
-    });
-
     $scope.formattedScale = function formattedScale() {
         return Math.round($scope.clientProperties.scale * 100);
     };
@@ -292,5 +297,66 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
     $scope.autoFitDisabled = function() {
         return $scope.clientProperties.minZoom >= 1;
     };
+    
+    // Mapping of stream index to notification object
+    var downloadNotifications = {};
+    
+    // Mapping of stream index to notification ID
+    var downloadNotificationIDs = {};
+    
+    $scope.$on('guacClientFileStart', function handleClientFileStart(event, guacClient, streamIndex, mimetype, filename) {
+        $scope.safeApply(function() {
+            
+            var notification = {
+                className  : 'download',
+                title      : 'client.fileTransfer.title',
+                text       : filename
+            };
+            
+            downloadNotifications[streamIndex]   = notification;
+            downloadNotificationIDs[streamIndex] = $scope.addNotification(notification);
+            
+        });
+    });
+
+    $scope.$on('guacClientFileProgress', function handleClientFileProgress(event, guacClient, streamIndex, mimetype, filename, length) {
+        $scope.safeApply(function() {
+            
+            var notification = downloadNotifications[streamIndex];
+            if (notification)
+                notification.progress = length;
+            
+        });
+    });
+    
+    $scope.$on('guacClientFileEnd', function handleClientFileEnd(event, guacClient, streamIndex, mimetype, filename, blob) {
+        $scope.safeApply(function() {
+
+            var notification = downloadNotifications[streamIndex];
+            var notificationID = downloadNotificationIDs[streamIndex];
+            
+            /**
+             * Saves the current file.
+             */
+            var saveFile = function saveFile() {
+                saveAs(blob, filename);
+                $scope.removeNotification(notificationID);
+                delete downloadNotifications[streamIndex];
+                delete downloadNotificationIDs[streamIndex];
+            };
+            
+            // Add download action and remove progress indicator
+            if (notificationID && notification) {
+                delete notification.progress;
+                notification.actions = [
+                    {
+                        name       : 'client.fileTransfer.save',
+                        callback   : saveFile
+                    }
+                ];
+            }
+
+        });
+    });
 
 }]);

guacamole/src/main/webapp/app/client/services/guacClientFactory.js

@@ -147,13 +147,13 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
 
                     // Update progress as data is received
                     blob_reader.onprogress = function onprogress() {
-                        $scope.$emit('guacClientFileProgress', guacClient, stream.index, mimetype, filename);
+                        $scope.$emit('guacClientFileProgress', guacClient, stream.index, mimetype, filename, blob_reader.getLength());
                         stream.sendAck("Received", Guacamole.Status.Code.SUCCESS);
                     };
 
                     // When complete, prompt for download
                     blob_reader.onend = function onend() {
-                        $scope.$emit('guacClientFileEnd', guacClient, stream.index, mimetype, filename);
+                        $scope.$emit('guacClientFileEnd', guacClient, stream.index, mimetype, filename, blob_reader.getBlob());
                     };
 
                     stream.sendAck("Ready", Guacamole.Status.Code.SUCCESS);

guacamole/src/main/webapp/app/client/styles/notification.css

@@ -33,56 +33,21 @@
     font-size: 0.7em;
     text-align: center;
     
-    border: 1px solid rgba(0, 0, 0, 0.75);
-    -moz-border-radius: 0.2em;
-    -webkit-border-radius: 0.2em;
-    -khtml-border-radius: 0.2em;
-    border-radius: 0.2em;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
     background: white;
 
     color: black;
 
     padding: 0.5em;
     margin: 1em;
+    width: 2in;
+    max-width: 75%;
     overflow: hidden;
-
-    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.25);
- 
 }
 
-.notification div {
-    display: inline-block;
-    text-align: left;
-}
-
-.notification .title-bar {
-    display: block;
-    white-space: nowrap;
-    font-weight: bold;
-
-    border-bottom: 1px solid black;
-    padding-bottom: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.notification .title-bar * {
-    vertical-align: middle;
-}
-
-.notification .close {
-
-    background: url('images/action-icons/guac-close.png');
-    background-size: 10px 10px;
-    -moz-background-size: 10px 10px;
-    -webkit-background-size: 10px 10px;
-    -khtml-background-size: 10px 10px;
-
-    width: 10px;
-    height: 10px;
-
-    float: right;
-    cursor: pointer;
-
+.notification .buttons {
+    margin: 0;
 }
 
 @keyframes notification-progress {
@@ -95,43 +60,25 @@
     to   {background-position: 64px 0px;}
 }
 
-.notification .caption,
-.notification.download .caption {
+.notification .title-bar {
+    font-size: 1.25em;
+    font-weight: bold;
+
+    text-transform: uppercase;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+    background: rgba(0, 0, 0, 0.04);
+
+    margin-bottom: 1em;
+}
+
+.notification .text {
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.notification.upload .status,
-.notification.download .status {
-    color: red;
-    font-size: 1em;
-    padding: 1em;
-}
-
-.notification.download .progress,
-.notification.upload .progress,
-.notification.download .download {
-
-    margin-top: 1em;
-    margin-left: 0.75em;
-    padding: 0.25em;
-    min-width: 5em;
-    
-    border: 1px solid gray;
-    -moz-border-radius: 0.2em;
-    -webkit-border-radius: 0.2em;
-    -khtml-border-radius: 0.2em;
-    border-radius: 0.2em;
-
-    text-align: center;
-    float: right;
-
-    position: relative;
-    
-}
-
 .notification.upload .progress {
     float: none;
     width: 80%;
@@ -160,6 +107,7 @@
 .notification.upload .progress,
 .notification.download .progress {
 
+    width: 100%;
     background: #C2C2C2 url('images/progress.png');
     background-size: 16px 16px;
     -moz-background-size: 16px 16px;
@@ -176,6 +124,20 @@
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
 
+    padding: 0.25em;
+    min-width: 5em;
+    
+    border: 1px solid gray;
+    -moz-border-radius: 0.2em;
+    -webkit-border-radius: 0.2em;
+    -khtml-border-radius: 0.2em;
+    border-radius: 0.2em;
+
+    text-align: center;
+    float: right;
+
+    position: relative;
+    
 }
 
 .notification.download .download {