From f243ae135b802d09077dde7bf20256f28c9e6287 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Wed, 14 Jan 2015 11:26:38 -0800
Subject: [PATCH] Add front-end file uploader

---
 ui/scripts/templates.js | 20 ++++++++++
 ui/scripts/ui/dialog.js | 83 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js
index b8b85348c3f..1b6400a16ad 100644
--- a/ui/scripts/templates.js
+++ b/ui/scripts/templates.js
@@ -107,6 +107,22 @@
                                 title: 'label.action.register.template',
                                 docID: 'helpNetworkOfferingName',
                                 preFilter: cloudStack.preFilter.createTemplate,
+                                fileUpload: {
+                                    getURL: function(args) {
+                                        args.response.success({
+                                            url: 'http://10.223.183.3/test-upload.php'
+                                        });
+                                    },
+                                    postUpload: function(args) {
+                                        // Called when upload is done to do 
+                                        // verification checks;
+                                        // i.e., poll the server to verify successful upload
+                                        //
+                                        // success() will close the dialog and call standard action
+                                        // error() will keep dialog open if user wants to re-submit
+                                        args.response.success();
+                                    }
+                                },
                                 fields: {
                                     name: {
                                         label: 'label.name',
@@ -115,6 +131,10 @@
                                             required: true
                                         }
                                     },
+                                    templateFileUpload: {
+                                        label: 'Select a file',
+                                        isFileUpload: true
+                                    },
                                     description: {
                                         label: 'label.description',
                                         docID: 'helpRegisterTemplateDescription',
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index 332b78f775c..f3f5dae406d 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -473,6 +473,16 @@
                     if (field.defaultValue) {
                         $input.val(strOrFunc(field.defaultValue));
                     }
+                } else if (field.isFileUpload) {
+                    $input = $('<input>').attr({
+                        type: 'file',
+                        name: 'files[]'
+                    }).appendTo($value);
+
+                    // Add events
+                    $input.change(function(event) {
+                        $form.data('files', event.target.files);
+                    });
                 } else if (field.isTokenInput) { // jquery.tokeninput.js
                     isAsync = true;
 
@@ -672,12 +682,73 @@
                     }
                 }
 
-                args.after({
-                    data: data,
-                    ref: args.ref, // For backwards compatibility; use context
-                    context: args.context,
-                    $form: $form
-                });
+                var uploadFiles = function() {
+                    $form.prepend($('<div>').addClass('loading-overlay'));
+                    args.form.fileUpload.getURL({
+                        formData: data,
+                        context: args.context,
+                        response: {
+                            success: function(successArgs) {
+                                //
+                                // Move file field into iframe; keep visible for consistency
+                                //
+                                var $uploadFrame = $('<iframe>');
+                                var $frameForm = $('<form>').attr({
+                                    method: 'POST',
+                                    action: successArgs.url,
+                                    enctype: 'multipart/form-data'
+                                });
+                                var $file = $form.find('input[type=file]');
+                                var $field = $file.closest('.form-item .value');
+
+                                $uploadFrame.css({ width: $field.outerWidth(), height: $field.height() }).show();
+                                $frameForm.append($file);
+                                $field.append($uploadFrame);
+                                $uploadFrame.contents().find('html body').append($frameForm);
+                                $frameForm.submit(function() {
+                                    $uploadFrame.load(function() {
+                                        args.form.fileUpload.postUpload({
+                                            formData: data,
+                                            context: args.context,
+                                            response: {
+                                                success: function() {
+                                                    args.after({
+                                                        data: data,
+                                                        ref: args.ref, // For backwards compatibility; use context
+                                                        context: args.context,
+                                                        $form: $form
+                                                    });
+                                                },
+                                                error: function(msg) {
+                                                    $form.find('.loading-overlay').remove();
+                                                    cloudStack.dialog.error({ message: msg });
+                                                }
+                                            }
+                                        });
+                                    });
+                                    return true;
+                                });
+                                $frameForm.submit();
+                            },
+                            error: function(msg) {
+                                cloudStack.dialog.error({ message: msg });
+                            }
+                        }
+                    });
+                };
+
+                if ($form.data('files')) {
+                    uploadFiles();
+
+                    return false;
+                } else {
+                    args.after({
+                        data: data,
+                        ref: args.ref, // For backwards compatibility; use context
+                        context: args.context,
+                        $form: $form
+                    });
+                }
 
                 return true;
             };