mujma: REFACTORING: Added support for Upload object, code reduction 70 lines.

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42066 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-16 02:36:16 +00:00
parent 45a9105a28
commit a218320f42
2 changed files with 52 additions and 118 deletions

View File

@ -43,6 +43,7 @@ class AssetAdmin extends LeftAndMain {
Requirements::javascript("cms/javascript/AssetAdmin_right.js"); Requirements::javascript("cms/javascript/AssetAdmin_right.js");
Requirements::javascript("cms/javascript/CMSMain_upload.js"); Requirements::javascript("cms/javascript/CMSMain_upload.js");
Requirements::javascript("cms/javascript/Upload.js");
Requirements::javascript("sapphire/javascript/Security_login.js"); Requirements::javascript("sapphire/javascript/Security_login.js");
Requirements::javascript("jsparty/SWFUpload/SWFUpload.js"); Requirements::javascript("jsparty/SWFUpload/SWFUpload.js");
@ -120,7 +121,7 @@ HTML;
<script> <script>
var multi_selector = new MultiSelector($('Form_UploadForm_FilesList'), null, $('Form_UploadForm_action_upload')); var multi_selector = new MultiSelector($('Form_UploadForm_FilesList'), null, $('Form_UploadForm_action_upload'));
multi_selector.addElement($('Form_UploadForm_Files-0')); multi_selector.addElement($('Form_UploadForm_Files-0'));
new window.top.document.Upload.initialize(); new window.top.document.CMSMain_upload();
</script> </script>
") ")
), new FieldSet( ), new FieldSet(

View File

@ -1,62 +1,36 @@
var Upload = { CMSMain_upload = Class.create();
CMSMain_upload.prototype = {
initialize: function() { initialize: function() {
iframe = window.top.document.getElementById('AssetAdmin_upload'); this.iframe = window.top.document.getElementById('AssetAdmin_upload');
Upload.fileUploaded = 0; this.onLoad();
Upload.uploadMessage = '';
Upload.onLoad();
}, },
onLoad: function() { onLoad: function() {
path = 'http://' + window.location.host + window.location.pathname; this.upload = new Upload({
if(path[path.length-1] == '/') path = path.substring(0,path.length-1); fileUploadLimit : '6',
var start = document.cookie.indexOf('PHPSESSID')+10; beginUploadOnQueue : false,
var end = document.cookie.indexOf(';',start); fileQueued : this.uploadFileQueuedCallback.bind(this),
if(end == -1) end = document.cookie.length; fileProgress : this.uploadProgressCallback.bind(this),
sessId = document.cookie.substring(start,end); fileCancelled : this.uploadFileCancelCallback.bind(this),
swfu = new SWFUpload({ fileComplete : this.uploadFileCompleteCallback.bind(this),
upload_target_url: path + '/index/root?executeForm=UploadForm&PHPSESSID=' + sessId, // Relative to the SWF file queueComplete : this.uploadQueueCompleteCallback.bind(this),
file_post_name: 'Files', buildUI : this.extendForm.bind(this)
// Flash file settings
file_size_limit : '1024000', // 10 MB
file_types : '*.*', // or you could use something like: '*.doc;*.wpd;*.pdf',
file_types_description : 'All Files',
file_upload_limit : '6',
//file_queue_limit : '1', // this isn't needed because the upload_limit will automatically place a queue limit
begin_upload_on_queue : false,
use_server_data_event : true,
validate_files: false,
// Event handler settings
file_queued_handler : Upload.uploadFileQueuedCallback,
file_validation_handler : Prototype.emptyFunction,
file_progress_handler : Upload.uploadProgressCallback,
file_cancelled_handler : Upload.uploadFileCancelCallback,
file_complete_handler : Upload.uploadFileCompleteCallback,
queue_complete_handler : Upload.uploadQueueCompleteCallback,
error_handler : Upload.uploadErrorCallback,
// Flash Settings
flash_url : 'jsparty/SWFUpload/SWFUpload.swf', // Relative to this file
// UI settings
ui_function: Upload.extendForm,
ui_container_id : 'Form_EditForm',
degraded_container_id : 'Form_EditForm',
// Debug settings
debug: false
}); });
}, },
extendForm: function() { extendForm: function() {
if(iframe.contentDocument == undefined) iframe.contentDocument = document.frames[0].document;//IE HACK if(this.iframe.contentDocument == undefined) this.iframe.contentDocument = document.frames[0].document;//IE HACK
element = iframe.contentDocument.getElementById('Form_UploadForm'); element = this.iframe.contentDocument.getElementById('Form_UploadForm');
inputFile = iframe.contentDocument.getElementById('Form_UploadForm_Files-0'); inputFile = this.iframe.contentDocument.getElementById('Form_UploadForm_Files-0');
inputFileParent = inputFile.parentNode; inputFileParent = inputFile.parentNode;
inputFileParent.removeChild(inputFile); inputFileParent.removeChild(inputFile);
inputFile = iframe.contentDocument.createElement('input'); inputFile = this.iframe.contentDocument.createElement('input');
inputFile.type = 'text'; inputFile.type = 'text';
inputFile.id = 'Form_UploadForm_Files-0'; inputFile.id = 'Form_UploadForm_Files-0';
inputFileParent.appendChild(inputFile); inputFileParent.appendChild(inputFile);
inputButton = iframe.contentDocument.getElementById('Form_UploadForm_Files-1'); inputButton = this.iframe.contentDocument.getElementById('Form_UploadForm_Files-1');
if(inputButton != null) inputButton.parentNode.removeChild(inputButton); if(inputButton != null) inputButton.parentNode.removeChild(inputButton);
inputButton = iframe.contentDocument.createElement('input'); inputButton = this.iframe.contentDocument.createElement('input');
inputButton.type = 'button'; inputButton.type = 'button';
inputButton.id = 'Form_UploadForm_Files-1'; inputButton.id = 'Form_UploadForm_Files-1';
inputButton.value = ' Browse...'; inputButton.value = ' Browse...';
@ -67,29 +41,34 @@ var Upload = {
inputButton.style.fontFamily = 'Arial'; inputButton.style.fontFamily = 'Arial';
inputButton.style.fontSize = '1.06em'; inputButton.style.fontSize = '1.06em';
inputFileParent.appendChild(inputButton); inputFileParent.appendChild(inputButton);
Event.observe(inputButton,'click',function() {swfu.browse();}); Event.observe(inputButton,'click',this.onBrowseClick.bind(this));
Event.observe(iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',function(event) { Event.observe(this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',this.onUploadClick.bind(this));
swfu.startUpload(); },
Event.stop(event);
}); onBrowseClick: function(event) {
this.upload.browse();
},
onUploadClick: function(event) {
Event.stop(event);
this.upload.startUpload();
}, },
uploadFileQueuedCallback: function(file,queueLength) { uploadFileQueuedCallback: function(file,queueLength) {
iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
Upload.addFileParam(file); var fileContainer = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
var fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
if(fileContainer == null) { if(fileContainer == null) {
fileContainer = iframe.contentDocument.createElement('div'); fileContainer = this.iframe.contentDocument.createElement('div');
fileContainer.id = 'Form_UploadForm_FilesList'; fileContainer.id = 'Form_UploadForm_FilesList';
iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer); this.iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer);
} }
var fileToUpload = iframe.contentDocument.createElement('div'); var fileToUpload = this.iframe.contentDocument.createElement('div');
fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id; fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id;
fileToUpload.style.marginBottom = '3px'; fileToUpload.style.marginBottom = '3px';
fileContainer.appendChild(fileToUpload); fileContainer.appendChild(fileToUpload);
var fileName = iframe.contentDocument.createElement('div'); var fileName = this.iframe.contentDocument.createElement('div');
fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id; fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id;
fileName.style.position = 'relative'; fileName.style.position = 'relative';
fileName.style.top = '-4px'; fileName.style.top = '-4px';
@ -99,7 +78,7 @@ var Upload = {
fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack
fileToUpload.appendChild(fileName); fileToUpload.appendChild(fileName);
var fileProgress = iframe.contentDocument.createElement('div'); var fileProgress = this.iframe.contentDocument.createElement('div');
fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id; fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id;
Position.clone(fileName,fileProgress); Position.clone(fileName,fileProgress);
fileProgress.style.backgroundColor = 'black'; fileProgress.style.backgroundColor = 'black';
@ -122,21 +101,20 @@ var Upload = {
fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px'; fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px';
fileToUpload.appendChild(fileProgress); fileToUpload.appendChild(fileProgress);
var fileDelete = iframe.contentDocument.createElement('input'); var fileDelete = this.iframe.contentDocument.createElement('input');
fileDelete.id = file.id; fileDelete.id = file.id;
fileDelete.type = 'button'; fileDelete.type = 'button';
fileDelete.value = 'Delete'; fileDelete.value = 'Delete';
Element.addClassName(fileDelete,'delete'); Element.addClassName(fileDelete,'delete');
fileToUpload.appendChild(fileDelete); fileToUpload.appendChild(fileDelete);
Event.observe(fileDelete,'click',Upload.uploadFileCancelCallback); Event.observe(fileDelete,'click',this.uploadFileCancelCallback.bind(this));
}, },
uploadProgressCallback: function(file,bytesLoaded) { uploadProgressCallback: function(file,bytesLoaded) {
fileName = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id); fileName = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id);
fileName.style.border = 'solid 1px black'; fileName.style.border = 'solid 1px black';
fileProgress = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id); fileProgress = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id);
fileProgress.style.opacity = 0.3; fileProgress.style.opacity = 0.3;fileProgress.style.filter = 'alpha(opacity=30)';
fileProgress.style.filter = 'alpha(opacity=30)';
if(!fileProgress.cloned) { if(!fileProgress.cloned) {
Position.clone(fileName,fileProgress); Position.clone(fileName,fileProgress);
fileProgress.style.width = '0px'; fileProgress.style.width = '0px';
@ -146,26 +124,20 @@ var Upload = {
}, },
uploadFileCompleteCallback: function(file,serverData) { uploadFileCompleteCallback: function(file,serverData) {
Upload.fileUploaded++; this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true;
toEval = serverData.substr(serverData.indexOf('<script'));
toEval = toEval.replace('<script type="text/javascript">','');
toEval = toEval.replace('</script>','');
Upload.uploadMessage = toEval;
iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true;
}, },
uploadFileCancelCallback: function(event) { uploadFileCancelCallback: function(event) {
element = Event.element(event); element = Event.element(event);
fileId = element.id; fileId = element.id;
swfu.cancelUpload(fileId); fileContainer = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList'); elementToDelete = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId);
elementToDelete = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId);
elementToDelete.parentNode.removeChild(elementToDelete); elementToDelete.parentNode.removeChild(elementToDelete);
filesToUpload = fileContainer.childNodes.length; filesToUpload = fileContainer.childNodes.length;
if(filesToUpload > 0) { if(filesToUpload > 0) {
iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false; this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
} else { } else {
iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true; this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true;
} }
$A(fileContainer.childNodes).each( $A(fileContainer.childNodes).each(
function(item) { function(item) {
@ -185,46 +157,7 @@ var Upload = {
}, },
uploadQueueCompleteCallback: function() { uploadQueueCompleteCallback: function() {
eval(Upload.uploadMessage.replace('1',Upload.fileUploaded)); eval(this.upload.getUploadMessage().replace('1',this.upload.getFilesUploaded()));
},
uploadErrorCallback: function(error_code, file, message) {
swfu.cancelQueue();
switch(error_code) {
case SWFUpload.ERROR_CODE_HTTP_ERROR:
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser');
break;
case SWFUpload.ERROR_CODE_IO_ERROR:
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser');
break;
case SWFUpload.ERROR_CODE_SECURITY_ERROR:
alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser');
break;
case SWFUpload.ERROR_CODE_FILE_EXCEEDS_SIZE_LIMIT:
alert('Files cannot be bigger than 10MB.');
break;
case SWFUpload.ERROR_CODE_ZERO_BYTE_FILE:
alert('Files cannot be empty');
break;
case SWFUpload.ERROR_CODE_QUEUE_LIMIT_EXCEEDED:
alert('You can only have six files in queue');
break;
case SWFUpload.ERROR_CODE_UPLOAD_FAILED:
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
break;
case SWFUpload.ERROR_CODE_SPECIFIED_FILE_NOT_FOUND:
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
break;
default:
alert('You have encountered an error. File hasn\'t has been uploaded. Please hit the "Refresh" button in your web browser');
}
},
addFileParam: function(file) {
swfu.addFileParam(file.id,'ID',iframe.contentDocument.getElementById('Form_UploadForm_ID').value);
swfu.addFileParam(file.id,'action_doUpload','1');
swfu.addFileParam(file.id,'Files',file.name);
swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824');
} }
} }
window.top.document.Upload = Upload; window.top.document.CMSMain_upload = CMSMain_upload;