etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add front-end file uploader

This commit is contained in:
Brian Federle 2015-01-14 11:26:38 -08:00
parent 627f5a62dc
commit f243ae135b
2 changed files with 97 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/scripts/templates.js
View File

@ -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',

83
ui/scripts/ui/dialog.js
View File

@ -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;
};