From ca824cb7fb367860286f2e725c64f606ac70ce86 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 6 Jan 2015 15:12:04 -0800
Subject: [PATCH] Add AJAX file upload handling

---
 ui/scripts/templates.js | 21 ++++++++++++++
 ui/scripts/ui/dialog.js | 62 +++++++++++++++++++----------------------
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js
index bd7e8e9382c..de9beaf5334 100644
--- a/ui/scripts/templates.js
+++ b/ui/scripts/templates.js
@@ -110,6 +110,27 @@
                                 title: 'label.action.register.template',
                                 docID: 'helpNetworkOfferingName',
                                 preFilter: cloudStack.preFilter.createTemplate,
+                                fileUpload: {
+                                    action: function(args) {
+                                        var fileData = args.fileData;
+
+                                        $.ajax({
+                                            url: '/test-upload.php',
+                                            type: 'POST',
+                                            data: fileData,
+                                            cache: false,
+                                            dataType: 'json',
+                                            processData: false, // Don't process the files
+                                            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
+                                            success: function(uploadData, textStatus, jqXHR) {
+                                                args.response.succes();
+                                            },
+                                            error: function(error) {
+                                                args.response.error('Error uploading files');
+                                            }
+                                        });
+                                    }
+                                },
                                 fields: {
                                     name: {
                                         label: 'label.name',
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index ca5ce8bcb5c..b23fb5699be 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -683,48 +683,44 @@
                 }
 
                 var uploadFiles = function() {
-                    // START A LOADING SPINNER HERE
+                    var formData = new FormData();
 
-                    // Create a formdata object and add the files
-                    var data = new FormData();
-                    $.each($form.data('files'), function(key, value)
-                           {
-                               data.append(key, value);
-                           });
+                    $form.prepend($('<div>').addClass('loading-overlay').text('Uploading files...'));
+                    $.each($form.data('files'), function(key, value) {
+                        formData.append(key, value);
+                    });
+                    args.form.fileUpload({
+                        context: args.context,
+                        uploadData: formData,
+                        response: {
+                            success: function() {
+                                $form.find('.loading-overlay').remove();
+                                $form.data('files', null);
 
-                    $.ajax({
-                        url: '/client/upload.json',
-                        type: 'POST',
-                        data: data,
-                        cache: false,
-                        dataType: 'json',
-                        processData: false, // Don't process the files
-                        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
-                        success: function(data, textStatus, jqXHR)
-                        {
-                            if(typeof data.error === 'undefined')
-                            {
-                                // Success so call function to process the form
-                                debugger;
-                                //submitForm(event, data);
+                                args.after({
+                                    data: $.extend(data, { uploadData: uploadData }),
+                                    ref: args.ref, // For backwards compatibility; use context
+                                    context: args.context,
+                                    $form: $form
+                                });
+
+                                $('div.overlay').remove();
+                                $('.tooltip-box').remove();
+                                $formContainer.remove();
+                                $(this).dialog('destroy');
+                                $('.hovered-elem').hide();
+                            },
+                            error: function(msg) {
+                                cloudStack.dialog.error({ message: msg });
                             }
-                            else
-                            {
-                                // Handle errors here
-                                console.log('ERRORS: ' + data.error);
-                            }
-                        },
-                        error: function(jqXHR, textStatus, errorThrown)
-                        {
-                            // Handle errors here
-                            console.log('ERRORS: ' + textStatus);
-                            // STOP LOADING SPINNER
                         }
                     });
                 };
 
                 if ($form.data('files')) {
                     uploadFiles();
+
+                    return false;
                 } else {
                     args.after({
                         data: data,