ENHANCEMENTS: I have added Upload object which handles most common tasks for uploading files.

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42063 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/AssetAdmin.php

@@ -42,7 +42,7 @@ class AssetAdmin extends LeftAndMain {
 		Requirements::javascript("cms/javascript/AssetAdmin_left.js");
 		Requirements::javascript("cms/javascript/AssetAdmin_right.js");
 
-		Requirements::javascript("cms/javascript/Upload.js");
+		Requirements::javascript("cms/javascript/CMSMain_upload.js");
 		Requirements::javascript("sapphire/javascript/Security_login.js");
 		Requirements::javascript("jsparty/SWFUpload/SWFUpload.js");
 		

code/LeftAndMain.php

@@ -80,6 +80,7 @@ abstract class LeftAndMain extends Controller {
 		
 		Requirements::css('cms/css/TinyMCEImageEnhancement.css');
 		Requirements::javascript("jsparty/SWFUpload/SWFUpload.js");
+		Requirements::javascript("cms/javascript/Upload.js");
 		Requirements::javascript("sapphire/javascript/Security_login.js");
 		Requirements::javascript('cms/javascript/TinyMCEImageEnhancement.js');
 

javascript/CMSMain_upload.js

@@ -0,0 +1,230 @@
+var Upload = {
+    initialize: function() {
+        iframe = window.top.document.getElementById('AssetAdmin_upload');
+        Upload.fileUploaded = 0;
+        Upload.uploadMessage = '';
+        Upload.onLoad();
+    },
+    
+    onLoad: function() {
+        path = 'http://' + window.location.host + window.location.pathname;
+        if(path[path.length-1] == '/') path = path.substring(0,path.length-1);
+        var start = document.cookie.indexOf('PHPSESSID')+10;
+        var end = document.cookie.indexOf(';',start);
+        if(end == -1) end = document.cookie.length;
+        sessId = document.cookie.substring(start,end);
+        swfu = new SWFUpload({
+                upload_target_url: path + '/index/root?executeForm=UploadForm&PHPSESSID=' + sessId,   // Relative to the SWF file
+                file_post_name: 'Files',
+                // 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() {
+        if(iframe.contentDocument == undefined) iframe.contentDocument = document.frames[0].document;//IE HACK   
+        element = iframe.contentDocument.getElementById('Form_UploadForm');
+        inputFile = iframe.contentDocument.getElementById('Form_UploadForm_Files-0');
+        inputFileParent = inputFile.parentNode;
+        inputFileParent.removeChild(inputFile);
+        inputFile = iframe.contentDocument.createElement('input');
+        inputFile.type = 'text';
+        inputFile.id = 'Form_UploadForm_Files-0';
+        inputFileParent.appendChild(inputFile);
+        inputButton = iframe.contentDocument.getElementById('Form_UploadForm_Files-1');
+        if(inputButton != null) inputButton.parentNode.removeChild(inputButton);
+        inputButton = iframe.contentDocument.createElement('input');
+        inputButton.type = 'button';
+        inputButton.id = 'Form_UploadForm_Files-1';
+        inputButton.value = ' Browse...';
+        inputButton.style.width = '66px';
+        inputButton.style.height = '19px';
+        inputButton.style.position = 'relative';
+        inputButton.style.top = '1px';
+        inputButton.style.fontFamily = 'Arial';
+        inputButton.style.fontSize = '1.06em';
+        inputFileParent.appendChild(inputButton);
+        Event.observe(inputButton,'click',function() {swfu.browse();});
+        Event.observe(iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',function(event) {
+                                               swfu.startUpload();
+                                               Event.stop(event);
+                                           });
+    },
+    
+    uploadFileQueuedCallback: function(file,queueLength) {
+        iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
+        Upload.addFileParam(file);
+        var fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
+        if(fileContainer == null) {
+           fileContainer = iframe.contentDocument.createElement('div');
+           fileContainer.id = 'Form_UploadForm_FilesList';
+           iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer);
+        }
+        
+        var fileToUpload = iframe.contentDocument.createElement('div');
+        fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id;
+        fileToUpload.style.marginBottom = '3px';
+        fileContainer.appendChild(fileToUpload);
+        
+        var fileName = iframe.contentDocument.createElement('div');
+        fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id;
+        fileName.style.position = 'relative';
+        fileName.style.top = '-4px';
+        fileName.style.display = 'inline';
+        fileName.style.padding = '2px';
+        fileName.innerHTML = file.name;
+        fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack
+        fileToUpload.appendChild(fileName);
+        
+        var fileProgress = iframe.contentDocument.createElement('div');
+        fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id;
+        Position.clone(fileName,fileProgress);       
+        fileProgress.style.backgroundColor = 'black';
+        fileProgress.style.display = 'inline';
+        fileProgress.style.position = 'absolute';
+        fileProgress.style.left = '5px';
+        fileProgress.style.width = '0px';
+        fileProgress.finished = false;        
+        switch(BrowserDetect.browser) {
+            case 'Explorer':
+                fileProgress.style.top = parseInt(fileProgress.style.top) + 6 + 'px';
+            break;
+            case 'Safari':
+                fileProgress.style.top = parseInt(fileProgress.style.top) + 4 + 'px';
+            break;
+            case 'Firefox':  
+                fileProgress.style.top = parseInt(fileProgress.style.top) + 8 + 'px';
+            break;
+        }
+        fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px';        
+        fileToUpload.appendChild(fileProgress);
+        
+        var fileDelete = iframe.contentDocument.createElement('input');
+        fileDelete.id = file.id;
+        fileDelete.type = 'button';
+        fileDelete.value = 'Delete';
+        Element.addClassName(fileDelete,'delete');
+        fileToUpload.appendChild(fileDelete);
+        Event.observe(fileDelete,'click',Upload.uploadFileCancelCallback);
+    },
+    
+    uploadProgressCallback: function(file,bytesLoaded) {
+        fileName = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id);
+        fileName.style.border = 'solid 1px black';
+        fileProgress = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id);
+        fileProgress.style.opacity = 0.3;
+        fileProgress.style.filter = 'alpha(opacity=30)';
+        if(!fileProgress.cloned) {
+            Position.clone(fileName,fileProgress);
+            fileProgress.style.width = '0px';
+            fileProgress.cloned = true;
+        }
+        fileProgress.style.width = (bytesLoaded / file.size) * Element.getDimensions(fileName).width - 1 + 'px';
+    },
+    
+    uploadFileCompleteCallback: function(file,serverData) {
+        Upload.fileUploaded++;
+        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) {
+        element = Event.element(event);
+        fileId = element.id;
+        swfu.cancelUpload(fileId);
+        fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
+        elementToDelete = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId);
+        elementToDelete.parentNode.removeChild(elementToDelete);
+        filesToUpload = fileContainer.childNodes.length;
+        if(filesToUpload > 0) {
+            iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
+        } else {
+            iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true;
+        }
+        $A(fileContainer.childNodes).each(
+            function(item) {
+                $A(item.childNodes).each(
+                    function(item) {
+                        if(item.id.indexOf('Name') != -1) {
+                            fileName = item;
+                        }
+                        if(item.id.indexOf('Progress') != -1) {
+                            fileProgress = item;
+                        }
+                    });
+                 Position.clone(fileName,fileProgress);
+                 if(fileProgress.finished == false) fileProgress.style.width = '0px';
+            }
+        );
+    },
+    
+    uploadQueueCompleteCallback: function() {
+        eval(Upload.uploadMessage.replace('1',Upload.fileUploaded));
+    },
+    
+    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;

javascript/TinyMCEImageEnhancement.js

@@ -1,92 +1,55 @@
 TinyMCEImageEnhancement = Class.create();
 TinyMCEImageEnhancement.prototype = {
     initialize: function() {
-        this.fileUploaded = 0;
+        this.filesUploaed = 0;
-        this.filesToUpload = 0;
+        this.processInProgress = false;
         Event.observe(window,'load',this.onWindowLoad.bind(this));
     },
     
     buildUI: function() {
         $('Form_EditorToolbarImageForm_FolderID').value = "";
         
-        var divAddFolder = document.createElement('div');
+        divAddFolder = this.addElement('div','group',$('FolderID'),{'id': 'AddFolderGroup'});
-        divAddFolder.id = "AddFolderGroup";
+        addFolder = this.addElement('a','link',divAddFolder,{'id': 'AddFolder','href' : '#','innerHTML': 'add folder'});
-        Element.addClassName(divAddFolder,'group');
+        newFolderName = this.addElement('input', 'addFolder',divAddFolder,{'id': 'NewFolderName','type' : 'text'});
-        
-        
-        var addFolder = document.createElement('a');
-        addFolder.id = 'AddFolder';
-        addFolder.href = '#';
-        addFolder.innerHTML = 'add folder';
-        Element.addClassName(addFolder,'link');
-        divAddFolder.appendChild(addFolder);
-  
-        var newFolderName = document.createElement('input');
-        newFolderName.id = 'NewFolderName';
-        newFolderName.type = 'text';
-        Element.addClassName(newFolderName,'addFolder');
-        divAddFolder.appendChild(newFolderName);
         Element.hide(newFolderName);
-
+        var folderOk = this.addElement('a','link',divAddFolder,{'id': 'FolderOk','href' : '#','innerHTML': 'ok'});
-        var folderOk = document.createElement('a');
-        folderOk.id = 'FolderOk';
-        folderOk.href= '#';
-        folderOk.innerHTML = 'ok';
-        Element.addClassName(folderOk,'addFolder');
-        Element.addClassName(folderOk,'link');
-        divAddFolder.appendChild(folderOk);
         Element.hide(folderOk);
-        
+        Element.addClassName(folderOk,'addFolder');
-        var folderCancel = document.createElement('a');
+        var folderCancel = this.addElement('a','link',divAddFolder,{'id': 'FolderCancel','href' : '#','innerHTML': 'cancel'});
-        folderCancel.id = 'FolderCancel';
-        folderCancel.href = '#';
-        folderCancel.innerHTML = 'cancel';
-        Element.addClassName(folderCancel,'addFolder');
-        Element.addClassName(folderCancel,'link');
-        divAddFolder.appendChild(folderCancel);
         Element.hide(folderCancel);
+        Element.addClassName(folderCancel,'addFolder');
         
-        $('FolderID').appendChild(divAddFolder);
+        var divUpload = this.addElement('div','group',$('FolderID'),{'id': 'UploadrGroup'});
-        
+        var pipeSeparator = this.addElement('div','',divUpload,{'id' : 'PipeSeparator','innerHTML' : ' | '});
-        var divUpload = document.createElement('div');
-        divUpload.id = "UploadGroup";
-        Element.addClassName(divUpload,'group');
-        
-        var pipeSeparator = document.createElement('div');
-        pipeSeparator.id = "PipeSeparator";
-        pipeSeparator.innerHTML = " | ";
         pipeSeparator.style.display = "inline";
-        divUpload.appendChild(pipeSeparator); 
+        var uploadFiles = this.addElement('a','link',divUpload,{'id' : 'UploadFiles','href' : '#','innerHTML' : 'upload'}); 
-        
-        var uploadFiles = document.createElement('a');
-        uploadFiles.id = 'UploadFiles';
-        uploadFiles.href = '#';
-        uploadFiles.innerHTML = 'upload';
-        Element.addClassName(uploadFiles,'link');
-        divUpload.appendChild(uploadFiles);
-        
-        $('FolderID').appendChild(divUpload);
         
         Event.observe(addFolder,'click',this.onAddFolder.bind(this));
         Event.observe(folderOk,'click',this.onFolderOk.bind(this));
         Event.observe(folderCancel,'click',this.onFolderCancel.bind(this));    
-        this.onUpload = this.onUpload.bind(this);
+        Event.observe($('UploadFiles'),'click',this.onUpload.bind(this));
-        Event.observe($('UploadFiles'),'click',this.onUpload);
+    },   
-        
     
+    addElement: function(tag, className, parent, properties) {
+        var e = document.createElement(tag);
+        Element.addClassName(e,className);
+        parent.appendChild(e);
+        Object.extend(e,properties);
+        return e;
     },
         
     onUpload: function(event) {
         Event.stop(event);
-        if(!this.uploadInProgress) {
+        
-	        var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
+        
-	        if(parentID != 'root') {
+        if(!this.processInProgress) {
-	            swfu.browse();
+	        if(this.getParentID() != 'root') {
-	            this.uploadInProgress = true;
+	            this.upload.browse();
 	        } else {
 	            statusMessage("Please choose folder","bad");                                                
 	        }
-	   }
+	    }
     },
     
     onAddFolder: function(event) {
@@ -98,11 +61,10 @@ TinyMCEImageEnhancement.prototype = {
     
     onFolderOk: function(event) {
         Event.stop(event);
-        var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
         var folderName = $('NewFolderName').value;
         var options = {
             method: 'post',
-            postBody: 'ParentID=' + parentID + '&ajax=1' ,
+            postBody: 'ParentID=' + this.getParentID() + '&ajax=1' ,
             onSuccess: this.onFolderGetSuccess.bind(this),
             onFailure: function(transport) {
                            errorMessage('Error: Folder not added', transport); 
@@ -125,7 +87,6 @@ TinyMCEImageEnhancement.prototype = {
         var minutes = date.getMinutes() < 10  ? '0' + date.getMinutes() : date.getMinutes();
         var seconds = date.getSeconds() < 10  == 1 ? '0' + date.getSeconds() : date.getSeconds();
         var currentDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; 
-        var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
         var folderName = $('NewFolderName').value;
         var options = {
             method: 'post',
@@ -135,7 +96,7 @@ TinyMCEImageEnhancement.prototype = {
                            errorMessage('Error: Folder not added', transport); 
                        }
         };
-        new Ajax.Request('admin/assets/index/' + parentID + '?executeForm=EditForm', options);
+        new Ajax.Request('admin/assets/index/' + this.getParentID() + '?executeForm=EditForm', options);
     },
     
     onFolderAddSuccess: function(transport) {
@@ -159,134 +120,56 @@ TinyMCEImageEnhancement.prototype = {
     
     onWindowLoad: function() {
         if($('FolderID') != null) {
-	        path = this.getBasePath();
+	        this.upload = new Upload(
-	        sessId = this.getSessionId();
+	            {
-	        swfu = new SWFUpload({
+	               'fileTypes': '*.jpeg;*.jpg;*.jpe;*.png;*.gif;',
-	                upload_target_url: path + '/assets/index/root?executeForm=UploadForm&PHPSESSID=' + sessId,   // Relative to the SWF file
+	               'fileTypesDescription' : 'Image files',
-	                file_post_name: 'Files',
+	               'fileUploadLimit' : '100',
-	                // Flash file settings
+	               'beginUploadOnQueue' : true,
-	                file_size_limit : '1024000',  // 10 MB
+                   'buildUI' : this.buildUI.bind(this),
-	                file_types : '*.jpeg;*.jpg;*.jpe;*.png;*.gif;', // or you could use something like: '*.doc;*.wpd;*.pdf',
+                   'fileQueued' : this.uploadFileQueuedCallback.bind(this),
-	                file_types_description : 'Image files',
+                   'fileComplete' : this.uploadFileCompleteCallback.bind(this),
-	                file_upload_limit : '100',
+                   'queueComplete' : this.uploadQueueCompleteCallback.bind(this)
-	                //file_queue_limit : '1', // this isn't needed because the upload_limit will automatically place a queue limit
+	            }        
-	                begin_upload_on_queue : true,
+            );
-	                use_server_data_event : true,
+        }
-	                validate_files: false,
-	                // Event handler settings
-	                file_queued_handler : this.uploadFileQueuedCallback.bind(this),
-	                file_validation_handler : Prototype.emptyFunction,
-	                file_progress_handler : this.uploadProgressCallback.bind(this),
-	                file_cancelled_handler : Prototype.emptyFunction.bind(this),
-	                file_complete_handler : this.uploadFileCompleteCallback.bind(this),
-	                queue_complete_handler : this.uploadQueueCompleteCallback.bind(this),
-	                error_handler : this.uploadErrorCallback.bind(this),
-	                dialog_cancelled_handler: this.dialogCancelCallback.bind(this),
-	                // Flash Settings
-	                flash_url : 'jsparty/SWFUpload/SWFUpload.swf',    // Relative to this file
-	                // UI settings
-	                ui_function: this.buildUI.bind(this),
-	                ui_container_id : '',
-	                degraded_container_id : '',
-	                // Debug settings
-	                debug: false
-	            });
-	    }
-    },
-    
-    dialogCancelCallback: function() {
-        this.uploadInProgress = false;
-    },
-    
-    getBasePath: function() {
-        var path = 'http://' + window.location.host + window.location.pathname;
-        if(path[path.length-1] == '/') path = path.substring(0,path.length-1);
-        return path;
-    },
-    
-    getSessionId: function() {
-        var start = document.cookie.indexOf('PHPSESSID')+10;
-        var end = document.cookie.indexOf(';',start);
-        if(end == -1) end = document.cookie.length;
-        return document.cookie.substring(start,end);
     },
     
     uploadFileQueuedCallback: function(file,queueLength) {
-        this.filesToUpload++;
+        this.processInProgress = true;
-        this.addFileParam(file);
+        this.upload.setFolderID(this.getParentID()); 
-        $('UploadFiles').innerHTML = "Uploading ... 1/" + this.filesToUpload;    
+        $('UploadFiles').innerHTML = "Uploading ... 1/" + this.upload.getFilesToUpload();    
-    },
-    
-    uploadProgressCallback: function(file,bytesLoaded) {
     },
     
     uploadFileCompleteCallback: function(file,serverData) {
-        this.fileUploaded++;
+        Element.addClassName($('UploadFiles'),'link');//Safari hack
-        Element.addClassName($('UploadFiles'),'link');
+        $('UploadFiles').innerHTML = 'Uploading ... ' + this.upload.getFilesUploaded() + "/" + this.upload.getFilesToUpload();
-        $('UploadFiles').innerHTML = 'Uploading ... ' + this.fileUploaded + "/" + this.filesToUpload;
     },
     
     uploadQueueCompleteCallback: function() {
+        this.filesUploaded = this.upload.getFilesUploaded();
         $('UploadFiles').innerHTML = "upload";
-        statusMessage('Uploaded ' + this.fileUploaded + ' files','good');
+        statusMessage('Uploaded ' + this.upload.getFilesUploaded() + ' files','good');
-        var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
+        if(this.getParentID() != 'root') {
-        if(parentID != 'root') {
+            $('Image').ajaxGetFiles(this.getParentID(),this.insertImages.bind(this));    
-            $('Image').ajaxGetFiles(parentID,this.insertImages.bind(this));    
         }
     },
     
-    uploadErrorCallback: function(error_code, file, message) {
+    insertImages: function(transport) {
-        swfu.cancelQueue();
+        //HACK FOR STRANGE ERROR OCCURING UNDER SAFARI
-        switch(error_code) {
+        if(transport.responseText == '') {
-            case SWFUpload.ERROR_CODE_HTTP_ERROR:
+            $('Image').ajaxGetFiles(this.getParentID(),this.insertImages.bind(this));
-                alert('You have encountered an error. File hasn\'t been uploaded. Please hit the "Refresh" button in your web browser');
+            return;
-            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');
         }
-    },
+        //END OF HACK
-     
-    addFileParam: function(file) {
-        var parentID = $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
-        swfu.addFileParam(file.id,'ID',parentID);
-        swfu.addFileParam(file.id,'action_doUpload','1');
-        swfu.addFileParam(file.id,'Files',file.name);
-        swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824');
-    },
-    
-    insertImages: function() {
-        this.uploadInProgress = false;
         $('Image').reapplyBehaviour();
         this.addToTinyMCE = this.addToTinyMCE.bind(this);
         var childNodes = $('Image').childNodes[0].childNodes;
-        var newImages = $A(childNodes).slice(childNodes.length - this.fileUploaded);
+        var newImages = $A(childNodes).slice(childNodes.length - this.filesUploaded);
         newImages.each(function(item) {
             tinyMCEImageEnhancement.addToTinyMCE(item.childNodes[0]);
         });
-        this.fileUploaded = 0;
+        this.processInProgress = false;
-        this.filesToUpload = 0;
-            
     },
     
     addToTinyMCE: function(target) {
@@ -326,6 +209,10 @@ TinyMCEImageEnhancement.prototype = {
 	            element.style.position = "";
 	        });
 	    }
+    },
+    
+    getParentID: function() {
+        return  $('Form_EditorToolbarImageForm_FolderID').value == '' ? 'root' : $('Form_EditorToolbarImageForm_FolderID').value;
     }
 }
 tinyMCEImageEnhancement = new TinyMCEImageEnhancement();

javascript/Upload.js

@@ -1,195 +1,104 @@
-var Upload = {
+Upload = Class.create();
-    initialize: function() {
+Upload.prototype = {
-        iframe = window.top.document.getElementById('AssetAdmin_upload');
+    initialize: function(params) {
-        Upload.fileUploaded = 0;
+        this.filesUploaded = 0;
-        Upload.uploadMessage = '';
+        this.filesToUpload = 0;
-        Upload.onLoad();
+        this.folderID = 'root';
+        this.uploadInProgress = false;
+        this.uploadMessage = '';
+        if(typeof params.fileSizeLimit != 'undefined') this.setFileSizeLimit = params.fileSizeLimit; else this.fileSizeLimit = '30720';
+        if(typeof params.fileTypes != 'undefined') this.fileTypes = params.fileTypes; else params.fileTypes = '*.*';
+        if(typeof params.fileTypesDescription != 'underfined') this.fileTypesDescription = params.fileTypesDescription; else this.fileTypesDescription = 'All Files';
+        if(typeof params.fileUploadLimit != 'undefined') this.fileUploadLimit = params.fileUploadLimit; else this.fileUploadLimit = '6';
+        if(typeof params.beginUploadOnQueue != 'undefined') this.beginUploadOnQueue = params.beginUploadOnQueue; else this.beginUploadOnQueue = false;
+        if(typeof params.fileQueued != 'undefined') this.fileQueued = params.fileQueued; 
+        if(typeof params.fileProgress != 'undefined') this.fileProgress = params.fileProgress; else this.fileProgress = Prototype.emptyFunction;
+        if(typeof params.fileCancelled != 'undefined') this.fileCancelled  = params.fileCancelled;
+        if(typeof params.fileComplete != 'undefined') this.fileComplete = params.fileComplete ;
+        if(typeof params.queueComplete != 'undefined') this.queueComplete = params.queueComplete;
+        if(typeof params.buildUI != 'undefined') this.customBuildUI = params.buildUI;
+        this.onLoad();
     },
     
     onLoad: function() {
-        path = 'http://' + window.location.host + window.location.pathname;
+        path = this.getBasePath();
-        if(path[path.length-1] == '/') path = path.substring(0,path.length-1);
+        sessId = this.getSessionId();
-        var start = document.cookie.indexOf('PHPSESSID')+10;
+        this.swfu = new SWFUpload({
-        var end = document.cookie.indexOf(';',start);
+                upload_target_url: path + '/assets/index/root?executeForm=UploadForm&PHPSESSID=' + sessId,   // Relative to the SWF file
-        if(end == -1) end = document.cookie.length;
-        sessId = document.cookie.substring(start,end);
-        swfu = new SWFUpload({
-                upload_target_url: path + '/index/root?executeForm=UploadForm&PHPSESSID=' + sessId,   // Relative to the SWF file
                 file_post_name: 'Files',
-                // Flash file settings
+                file_size_limit : this.fileSizeLimit,  // 30 MB
-                file_size_limit : '1024000',  // 10 MB
+                file_types : this.fileTypes, // or you could use something like: '*.doc;*.wpd;*.pdf',
-                file_types : '*.*', // or you could use something like: '*.doc;*.wpd;*.pdf',
+                file_types_description : this.fileTypeDescription,
-                file_types_description : 'All Files',
+                file_upload_limit : this.fileUploadLimit,
-                file_upload_limit : '6',
+                begin_upload_on_queue : this.beginUploadOnQueue,
-                //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_queued_handler : this.uploadFileQueuedCallback.bind(this),
+                file_complete_handler : this.uploadFileCompleteCallback.bind(this),
+                file_progress_handler: this.uploadFileProgressCallback.bind(this),
+                queue_complete_handler : this.uploadQueueCompleteCallback.bind(this),
+                error_handler : this.uploadErrorCallback.bind(this),
                 file_validation_handler : Prototype.emptyFunction,
-                file_progress_handler : Upload.uploadProgressCallback,
+                file_cancelled_handler: Prototype.emptyFunction,
-                file_cancelled_handler : Upload.uploadFileCancelCallback,
+                
-                file_complete_handler : Upload.uploadFileCompleteCallback,
+                ui_container_id: 'abc1',
-                queue_complete_handler : Upload.uploadQueueCompleteCallback,
+                degraded_container_id: 'abc2', 
-                error_handler : Upload.uploadErrorCallback,
+                
-                // Flash Settings
+                
+ 
                 flash_url : 'jsparty/SWFUpload/SWFUpload.swf',    // Relative to this file
-                // UI settings
+                ui_function: this.buildUI.bind(this),
-                ui_function: Upload.extendForm,
-                ui_container_id : 'Form_EditForm',
-                degraded_container_id : 'Form_EditForm',
-                // Debug settings
                 debug: false
             });
     },
     
-    extendForm: function() {
+    getBasePath: function() {
-        if(iframe.contentDocument == undefined) iframe.contentDocument = document.frames[0].document;//IE HACK   
+        var path = 'http://' + window.location.host + window.location.pathname;
-        element = iframe.contentDocument.getElementById('Form_UploadForm');
+        if(path[path.length-1] == '/') path = path.substring(0,path.length-1);
-        inputFile = iframe.contentDocument.getElementById('Form_UploadForm_Files-0');
+        return path;
-        inputFileParent = inputFile.parentNode;
+    },
-        inputFileParent.removeChild(inputFile);
+    
-        inputFile = iframe.contentDocument.createElement('input');
+    getSessionId: function() {
-        inputFile.type = 'text';
+        var start = document.cookie.indexOf('PHPSESSID')+10;
-        inputFile.id = 'Form_UploadForm_Files-0';
+        var end = document.cookie.indexOf(';',start);
-        inputFileParent.appendChild(inputFile);
+        if(end == -1) end = document.cookie.length;
-        inputButton = iframe.contentDocument.getElementById('Form_UploadForm_Files-1');
+        return document.cookie.substring(start,end);
-        if(inputButton != null) inputButton.parentNode.removeChild(inputButton);
+    },
-        inputButton = iframe.contentDocument.createElement('input');
+    
-        inputButton.type = 'button';
+    buildUI: function() {
-        inputButton.id = 'Form_UploadForm_Files-1';
+        this.customBuildUI();	        
-        inputButton.value = ' Browse...';
-        inputButton.style.width = '66px';
-        inputButton.style.height = '19px';
-        inputButton.style.position = 'relative';
-        inputButton.style.top = '1px';
-        inputButton.style.fontFamily = 'Arial';
-        inputButton.style.fontSize = '1.06em';
-        inputFileParent.appendChild(inputButton);
-        Event.observe(inputButton,'click',function() {swfu.browse();});
-        Event.observe(iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',function(event) {
-                                               swfu.startUpload();
-                                               Event.stop(event);
-                                           });
     },
     
     uploadFileQueuedCallback: function(file,queueLength) {
-        iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
+        this.filesToUpload++;
-        Upload.addFileParam(file);
+        this.fileQueued(file, queueLength);
-        var fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
+        this.addFileParam(file);
-        if(fileContainer == null) {
-           fileContainer = iframe.contentDocument.createElement('div');
-           fileContainer.id = 'Form_UploadForm_FilesList';
-           iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer);
-        }
-        
-        var fileToUpload = iframe.contentDocument.createElement('div');
-        fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id;
-        fileToUpload.style.marginBottom = '3px';
-        fileContainer.appendChild(fileToUpload);
-        
-        var fileName = iframe.contentDocument.createElement('div');
-        fileName.id = 'Form_UploadForm_FilesList_Name_' + file.id;
-        fileName.style.position = 'relative';
-        fileName.style.top = '-4px';
-        fileName.style.display = 'inline';
-        fileName.style.padding = '2px';
-        fileName.innerHTML = file.name;
-        fileName.style.height = Element.getDimensions(fileName).height + 1 + 'px';//IE hack
-        fileToUpload.appendChild(fileName);
-        
-        var fileProgress = iframe.contentDocument.createElement('div');
-        fileProgress.id = 'Form_UploadForm_FilesList_Progress_' + file.id;
-        Position.clone(fileName,fileProgress);       
-        fileProgress.style.backgroundColor = 'black';
-        fileProgress.style.display = 'inline';
-        fileProgress.style.position = 'absolute';
-        fileProgress.style.left = '5px';
-        fileProgress.style.width = '0px';
-        fileProgress.finished = false;        
-        switch(BrowserDetect.browser) {
-            case 'Explorer':
-                fileProgress.style.top = parseInt(fileProgress.style.top) + 6 + 'px';
-            break;
-            case 'Safari':
-                fileProgress.style.top = parseInt(fileProgress.style.top) + 4 + 'px';
-            break;
-            case 'Firefox':  
-                fileProgress.style.top = parseInt(fileProgress.style.top) + 8 + 'px';
-            break;
-        }
-        fileProgress.style.height = Element.getDimensions(fileName).height + 1 + 'px';        
-        fileToUpload.appendChild(fileProgress);
-        
-        var fileDelete = iframe.contentDocument.createElement('input');
-        fileDelete.id = file.id;
-        fileDelete.type = 'button';
-        fileDelete.value = 'Delete';
-        Element.addClassName(fileDelete,'delete');
-        fileToUpload.appendChild(fileDelete);
-        Event.observe(fileDelete,'click',Upload.uploadFileCancelCallback);
-    },
-    
-    uploadProgressCallback: function(file,bytesLoaded) {
-        fileName = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id);
-        fileName.style.border = 'solid 1px black';
-        fileProgress = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id);
-        fileProgress.style.opacity = 0.3;
-        fileProgress.style.filter = 'alpha(opacity=30)';
-        if(!fileProgress.cloned) {
-            Position.clone(fileName,fileProgress);
-            fileProgress.style.width = '0px';
-            fileProgress.cloned = true;
-        }
-        fileProgress.style.width = (bytesLoaded / file.size) * Element.getDimensions(fileName).width - 1 + 'px';
     },
     
     uploadFileCompleteCallback: function(file,serverData) {
-        Upload.fileUploaded++;
+        this.filesUploaded++;
-        toEval = serverData.substr(serverData.indexOf('<script'));
+        var toEval = serverData.substr(serverData.indexOf('<script'));
         toEval = toEval.replace('<script type="text/javascript">','');
         toEval = toEval.replace('</script>','');
-        Upload.uploadMessage = toEval;
+        this.uploadMessage = toEval;
-        iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true;
+        this.fileComplete(file, serverData);
     },
     
-    uploadFileCancelCallback: function(event) {
+    uploadFileProgressCallback: function(file, bytes_complete) {
-        element = Event.element(event);
+        this.uploadInProgress = true;
-        fileId = element.id;
+        this.fileProgress(file, bytes_complete);
-        swfu.cancelUpload(fileId);
-        fileContainer = iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
-        elementToDelete = iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId);
-        elementToDelete.parentNode.removeChild(elementToDelete);
-        filesToUpload = fileContainer.childNodes.length;
-        if(filesToUpload > 0) {
-            iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
-        } else {
-            iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = true;
-        }
-        $A(fileContainer.childNodes).each(
-            function(item) {
-                $A(item.childNodes).each(
-                    function(item) {
-                        if(item.id.indexOf('Name') != -1) {
-                            fileName = item;
-                        }
-                        if(item.id.indexOf('Progress') != -1) {
-                            fileProgress = item;
-                        }
-                    });
-                 Position.clone(fileName,fileProgress);
-                 if(fileProgress.finished == false) fileProgress.style.width = '0px';
-            }
-        );
     },
     
     uploadQueueCompleteCallback: function() {
-        eval(Upload.uploadMessage.replace('1',Upload.fileUploaded));
+        this.queueComplete();
+        this.uploadInProgress = false;
+        this.filesUploaded = 0;
+        this.filesToUpload = 0;
     },
     
     uploadErrorCallback: function(error_code, file, message) {
-        swfu.cancelQueue();
+        this.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');
@@ -201,7 +110,7 @@ var Upload = {
 	            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.');
+	            alert('Files cannot be bigger than ' + this.fileSizeLimit/1024 + ' MB.');
 	        break;
 	        case SWFUpload.ERROR_CODE_ZERO_BYTE_FILE:
 	            alert('Files cannot be empty');
@@ -221,10 +130,29 @@ var Upload = {
     },
      
     addFileParam: function(file) {
-        swfu.addFileParam(file.id,'ID',iframe.contentDocument.getElementById('Form_UploadForm_ID').value);
+        this.swfu.addFileParam(file.id,'ID',this.folderID);
-        swfu.addFileParam(file.id,'action_doUpload','1');
+        this.swfu.addFileParam(file.id,'action_doUpload','1');
-        swfu.addFileParam(file.id,'Files',file.name);
+        this.swfu.addFileParam(file.id,'Files',file.name);
-        swfu.addFileParam(file.id,'MAX_FILE_SIZE','1073741824');
+        this.swfu.addFileParam(file.id,'MAX_FILE_SIZE','31457280');
+    },
+    
+    browse: function() {
+        this.swfu.browse();
+    },
+    
+    setFolderID: function(id) {
+        this.folderID = id;
+    },
+    
+    getFilesUploaded: function() {
+        return this.filesUploaded;
+    },
+    
+    getFilesToUpload: function() {
+        return this.filesToUpload;
+    },
+    
+    isUploadInProgress: function() {
+        return this.uploadInProgress;
     }
 }
-window.top.document.Upload = Upload;