Repository: cloudstack Updated Branches: refs/heads/ui-template-uploader a36d2191e -> ca824cb7f
Add AJAX file upload handling Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/ca824cb7 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/ca824cb7 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/ca824cb7 Branch: refs/heads/ui-template-uploader Commit: ca824cb7fb367860286f2e725c64f606ac70ce86 Parents: a36d219 Author: Brian Federle <[email protected]> Authored: Tue Jan 6 15:12:04 2015 -0800 Committer: Brian Federle <[email protected]> Committed: Tue Jan 6 15:12:04 2015 -0800 ---------------------------------------------------------------------- ui/scripts/templates.js | 21 ++++++++++++++ ui/scripts/ui/dialog.js | 66 +++++++++++++++++++++----------------------- 2 files changed, 52 insertions(+), 35 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ca824cb7/ui/scripts/templates.js ---------------------------------------------------------------------- diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js index bd7e8e9..de9beaf 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', http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ca824cb7/ui/scripts/ui/dialog.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index ca5ce8b..b23fb56 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 - - // Create a formdata object and add the files - var data = new FormData(); - $.each($form.data('files'), function(key, value) - { - data.append(key, value); - }); - - $.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); - } - else - { - // Handle errors here - console.log('ERRORS: ' + data.error); + var formData = new FormData(); + + $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); + + 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 }); } - }, - 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,
