File upload dialog.

guacamole/src/main/webapp/scripts/client-ui.js

@@ -1086,6 +1086,12 @@ GuacUI.Client.attach = function(guac) {
         var reader = new FileReader();
         reader.onloadend = function() {
 
+            // Add upload notification
+            var upload = new GuacUI.Upload(file.name);
+            upload.updateProgress(getSizeString(0));
+
+            GuacUI.Client.notification_area.appendChild(upload.getElement());
+
             // Open file for writing
             var stream = GuacUI.Client.attachedClient.createFileStream(file.type, file.name);
 
@@ -1096,6 +1102,7 @@ GuacUI.Client.attach = function(guac) {
             // Invalidate stream on all errors
             stream.onerror = function() {
                 valid = false;
+                // TODO: Update notification with error status
             };
 
             // Continue upload when acknowledged
@@ -1115,8 +1122,14 @@ GuacUI.Client.attach = function(guac) {
                 offset += 4096;
 
                 // If at end, stop upload
-                if (offset >= bytes.length)
+                if (offset >= bytes.length) {
                     stream.close();
+                    GuacUI.Client.notification_area.removeChild(upload.getElement());
+                }
+
+                // Otherwise, update progress
+                else
+                    upload.updateProgress(getSizeString(offset));
 
             };
 

guacamole/src/main/webapp/scripts/guac-ui.js

@@ -788,6 +788,78 @@ GuacUI.Download = function(filename) {
 
 };
 
+/**
+ * Interface object which displays the progress of a upload.
+ * 
+ * @constructor
+ * @param {String} filename The name the file will have once complete.
+ */
+GuacUI.Upload = function(filename) {
+
+    /**
+     * Reference to this GuacUI.Upload.
+     * @private
+     */
+    var guac_upload = this;
+
+    /**
+     * The outer div representing the notification.
+     * @private
+     */
+    var element = GuacUI.createElement("div", "upload notification");
+
+    /**
+     * Title bar describing the notification.
+     * @private
+     */
+    var title = GuacUI.createChildElement(element, "div", "title-bar");
+
+    /**
+     * Close button for removing the notification.
+     * @private
+     */
+    var close_button = GuacUI.createChildElement(title, "div", "close");
+    close_button.onclick = function() {
+        if (guac_upload.onclose)
+            guac_upload.onclose();
+    };
+
+    GuacUI.createChildElement(title, "div", "title").textContent =
+        "File Transfer";
+
+    GuacUI.createChildElement(element, "div", "caption").textContent =
+        filename + " ";
+
+    /**
+     * Progress bar and status.
+     * @private
+     */
+    var progress = GuacUI.createChildElement(element, "div", "progress");
+
+    /**
+     * Updates the content of the progress indicator with the given text.
+     * 
+     * @param {String} text The text to assign to the progress indicator.
+     */
+    this.updateProgress = function(text) {
+        progress.textContent = text;
+    };
+
+    /**
+     * Returns the element representing this notification.
+     */
+    this.getElement = function() {
+        return element;
+    };
+
+    /**
+     * Called when the close button of this notification is clicked.
+     * @event
+     */
+    this.onclose = null;
+
+};
+
 /**
  * A grouping component. Child elements can be added via the addElement()
  * function. By default, groups display as collapsed.

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

@@ -361,6 +361,7 @@ p.hint {
     to   {background-position: 64px 0px;}
 }
 
+.upload.notification .caption,
 .download.notification .caption {
     width: 100%;
     white-space: nowrap;
@@ -369,7 +370,9 @@ p.hint {
 }
 
 .download.notification .progress,
-.download.notification .download {
+.upload.notification .progress,
+.download.notification .download,
+.upload.notification .upload {
 
     margin-top: 1em;
     margin-left: 0.75em;
@@ -384,6 +387,7 @@ p.hint {
 
 }
 
+.upload.notification .progress,
 .download.notification .progress {
 
     background: #444 url('../images/progress.png');
@@ -404,6 +408,7 @@ p.hint {
 
 }
 
+.upload.notification .upload,
 .download.notification .download {
     background: rgb(16, 87, 153);
     cursor: pointer;