silverstripe-cms/javascript/CMSMain_upload.js

/**
 * If one of methods is not commented look for comment in Upload.js 
*/
CMSMain_upload = Class.create();
CMSMain_upload.prototype = {
    initialize: function() {
        this.iframe = window.top.document.getElementById('AssetAdmin_upload');
        this.onLoad();
    },

    onLoad: function() {
        this.upload = new Upload({
                fileUploadLimit : '6',
                beginUploadOnQueue : false,
                fileQueued : this.uploadFileQueuedCallback.bind(this),
                fileProgress : this.uploadProgressCallback.bind(this),
                fileCancelled : this.uploadFileCancelCallback.bind(this),
                fileComplete : this.uploadFileCompleteCallback.bind(this),
                queueComplete : this.uploadQueueCompleteCallback.bind(this),
                buildUI : this.extendForm.bind(this)
            });
    },
    
    /**
     * Builds UI, called only when Upload object will be able to create flash uploader. 
    */
    
    extendForm: function() {
        if(this.iframe.contentDocument == undefined) this.iframe.contentDocument = document.frames[0].document;//IE HACK   
        element = this.iframe.contentDocument.getElementById('Form_UploadForm');
        inputFile = this.iframe.contentDocument.getElementById('Form_UploadForm_Files-0');
        inputFileParent = inputFile.parentNode;
        inputFileParent.removeChild(inputFile);
        inputFile = this.iframe.contentDocument.createElement('input');
        inputFile.type = 'text';
        inputFile.id = 'Form_UploadForm_Files-0';
        inputFileParent.appendChild(inputFile);
        inputButton = this.iframe.contentDocument.getElementById('Form_UploadForm_Files-1');
        if(inputButton != null) inputButton.parentNode.removeChild(inputButton);
        inputButton = this.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',this.onBrowseClick.bind(this));
        Event.observe(this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload'),'click',this.onUploadClick.bind(this));
    },
    
    onBrowseClick: function(event) {
        this.upload.browse();
    },
    
    onUploadClick: function(event) {
        Event.stop(event);
        this.upload.startUpload();
    },
    
    uploadFileQueuedCallback: function(file,queueLength) {
        this.upload.setFolderID(this.iframe.contentDocument.getElementById('Form_UploadForm_ID').value); 
        this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
        var fileContainer = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
        if(fileContainer == null) {
           fileContainer = this.iframe.contentDocument.createElement('div');
           fileContainer.id = 'Form_UploadForm_FilesList';
           this.iframe.contentDocument.getElementById('Form_UploadForm').appendChild(fileContainer);
        }
        
        var fileToUpload = this.iframe.contentDocument.createElement('div');
        fileToUpload.id = 'Form_UploadForm_FilesList_' + file.id;
        fileToUpload.style.marginBottom = '3px';
        fileContainer.appendChild(fileToUpload);
        
        var fileName = this.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 = this.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 = this.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',this.uploadFileCancelCallback.bind(this));
    },
    
    uploadProgressCallback: function(file,bytesLoaded) {
        fileName = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Name_' + file.id);
        fileName.style.border = 'solid 1px black';
        fileProgress = this.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) {
        this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_Progress_' + file.id).finished = true;
    },
    
    uploadFileCancelCallback: function(event) {
        element = Event.element(event);
        fileId = element.id;
        fileContainer = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList');
        elementToDelete = this.iframe.contentDocument.getElementById('Form_UploadForm_FilesList_' + fileId);
        elementToDelete.parentNode.removeChild(elementToDelete);
        filesToUpload = fileContainer.childNodes.length;
        if(filesToUpload > 0) {
            this.iframe.contentDocument.getElementById('Form_UploadForm_action_upload').disabled = false;
        } else {
            this.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(this.upload.getUploadMessage().replace('1',this.upload.getFilesUploaded()));
    }
}
window.top.document.CMSMain_upload = CMSMain_upload;