iFrame upload file
diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js index 2484318..638bb27 100644 --- a/ui/scripts/templates.js +++ b/ui/scripts/templates.js
@@ -113,8 +113,17 @@ fileUpload: { getURL: function(args) { args.response.success({ - data: 'http://10.223.183.3/test-upload.json' + 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: {
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index b20cbe7..7e36b5c 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js
@@ -684,20 +684,52 @@ } var uploadFiles = function() { - $form.prepend($('<div>').addClass('loading-overlay').text('Uploading files...')); + $form.prepend($('<div>').addClass('loading-overlay')); args.form.fileUpload.getURL({ formData: data, context: args.context, response: { success: function(successArgs) { - var $uploadFrame = $('<iframe>'); - - $uploadFrame.appendTo('html body'); - - - // debug - $uploadFrame.css({background:'white',width:320,height:240,position:'absolute',left:0,top:0,'z-index':12000}).show(); // + // 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 });