Author: andrei_exadel Date: 2008-02-21 10:20:33 -0500 (Thu, 21 Feb 2008) New Revision: 6251 Modified: trunk/sandbox/ui/fileUpload/src/main/config/component/fileUpload.xml trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/css/fileUpload.xcss trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js trunk/sandbox/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx Log: add customization classes Modified: trunk/sandbox/ui/fileUpload/src/main/config/component/fileUpload.xml =================================================================== --- trunk/sandbox/ui/fileUpload/src/main/config/component/fileUpload.xml 2008-02-21 15:10:08 UTC (rev 6250) +++ trunk/sandbox/ui/fileUpload/src/main/config/component/fileUpload.xml 2008-02-21 15:20:33 UTC (rev 6251) @@ -1,46 +1,46 @@ -<?xml version="1.0" encoding="UTF-8"?> +<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE components PUBLIC "-//AJAX4JSF//CDK Generator config/EN" "https://ajax4jsf.dev.java.net/nonav/dtds/component-config.dtd" [ <!ENTITY listeners SYSTEM "listener.ent"> ] -> -<components> - <component> - <name>org.richfaces.component.FileUpload</name> - <family>org.richfaces.component.FileUpload</family> - <classname>org.richfaces.component.html.HtmlFileUpload</classname> - <superclass>org.richfaces.org.jboss.seam.ui.component.UIFileUpload</superclass> - <description> +> +<components> + <component> + <name>org.richfaces.component.FileUpload</name> + <family>org.richfaces.component.FileUpload</family> + <classname>org.richfaces.component.html.HtmlFileUpload</classname> + <superclass>org.richfaces.org.jboss.seam.ui.component.UIFileUpload</superclass> + <description> <![CDATA[ -Renders a file upload control. This control must be used within a form with an encoding type of multipart/form-data, i.e: - -<h:form enctype="multipart/form-data"> - -For multipart requests, the Seam Multipart servlet filter must also be configured in web.xml: - -<filter> - <filter-name>Seam Filter</filter-name> - <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> -</filter> - -<filter-mapping> - <filter-name>Seam Filter</filter-name> - <url-pattern>/*</url-pattern> -</filter-mapping> - -The following configuration options for multipart requests may be configured in components.xml: - -* createTempFiles - if this option is set to true, uploaded files are streamed to a temporary file instead of in memory. -* maxRequestSize - the maximum size of a file upload request, in bytes. - -Here's an example: - -<component class="org.jboss.seam.servlet.MultipartConfig"> - <property name="createTempFiles">true</property> - <property name="maxRequestSize">1000000</property> +Renders a file upload control. This control must be used within a form with an encoding type of multipart/form-data, i.e: + +<h:form enctype="multipart/form-data"> + +For multipart requests, the Seam Multipart servlet filter must also be configured in web.xml: + +<filter> + <filter-name>Seam Filter</filter-name> + <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> +</filter> + +<filter-mapping> + <filter-name>Seam Filter</filter-name> + <url-pattern>/*</url-pattern> +</filter-mapping> + +The following configuration options for multipart requests may be configured in components.xml: + +* createTempFiles - if this option is set to true, uploaded files are streamed to a temporary file instead of in memory. +* maxRequestSize - the maximum size of a file upload request, in bytes. + +Here's an example: + +<component class="org.jboss.seam.servlet.MultipartConfig"> + <property name="createTempFiles">true</property> + <property name="maxRequestSize">1000000</property> </component> -]]> - </description> +]]> + </description> <test> <classname>org.richfaces.component.html.HtmlFileUploadComponentTestCase</classname> <superclassname>org.ajax4jsf.tests.AbstractAjax4JsfTestCase</superclassname> @@ -49,99 +49,129 @@ <name>org.richfaces.renderkit.html.FileUploadRenderer</name> <template>org/richfaces/fileUpload.jspx</template> </renderer> - <tag> - <name>fileUpload</name> - <classname>org.richfaces.taglib.FileUploadTag</classname> - <superclass> - org.ajax4jsf.webapp.taglib.HtmlComponentTagBase - </superclass> + <tag> + <name>fileUpload</name> + <classname>org.richfaces.taglib.FileUploadTag</classname> + <superclass> + org.ajax4jsf.webapp.taglib.HtmlComponentTagBase + </superclass> <test> <classname>org.richfaces.taglib.HtmlFileUploadTagTestCase</classname> <superclassname>org.ajax4jsf.tests.AbstractAjax4JsfTestCase</superclassname> </test> - </tag> - &ui_component_attributes; - &ui_input_attributes; - &html_style_attributes; - &html_input_attributes; - &html_events; - &html_input_events; - <property transient="true"> - <name>accept</name> - <classname>java.lang.String</classname> - <description>a comma-separated list of content types to accept, may not be supported by the browser. E.g. "images/png,images/jpg", "images/*".</description> + </tag> + &ui_component_attributes; + &ui_input_attributes; + &html_style_attributes; + &html_input_attributes; + &html_events; + &html_input_events; + <property transient="true"> + <name>accept</name> + <classname>java.lang.String</classname> + <description>a comma-separated list of content types to accept, may not be supported by the browser. E.g. "images/png,images/jpg", "images/*".</description> </property> - <property elonly="true"> - <name>data</name> - <classname>java.lang.Object</classname> - <description>this value binding receives the file's content type (optional).</description> - </property> - <property elonly="true"> - <name>contentType</name> - <classname>java.lang.String</classname> - <description>the property to receive the contentType</description> - </property> - <property elonly="true"> - <name>fileName</name> - <classname>java.lang.String</classname> - <description>this value binding receives the filename (optional).</description> - </property> - <property elonly="true"> - <name>fileSize</name> - <classname>java.lang.Integer</classname> - <description>this value binding receives the file size (optional).</description> + <property elonly="true"> + <name>data</name> + <classname>java.lang.Object</classname> + <description>this value binding receives the file's content type (optional).</description> </property> + <property elonly="true"> + <name>contentType</name> + <classname>java.lang.String</classname> + <description>the property to receive the contentType</description> + </property> + <property elonly="true"> + <name>fileName</name> + <classname>java.lang.String</classname> + <description>this value binding receives the filename (optional).</description> + </property> + <property elonly="true"> + <name>fileSize</name> + <classname>java.lang.Integer</classname> + <description>this value binding receives the file size (optional).</description> + </property> <property> <name>progressInfo</name> <classname>java.lang.String</classname> <description>Defines bean name where progress info should be stored (optional).</description> </property> <property> - <name>maxFiles</name> + <name>maxFilesQuantity</name> <classname>java.lang.Integer</classname> <description>Defines max files count allowed for upload (optional).</description> </property> <property> - <name>addStyle</name> + <name>addButtonClass</name> <classname>java.lang.String</classname> <description>CSS style for add button</description> </property> <property> - <name>addStyleDisabled</name> + <name>addButtonClassDisabled</name> <classname>java.lang.String</classname> <description>CSS style for add button disabled</description> </property> <property> - <name>uploadStyle</name> + <name>uploadButtonClass</name> <classname>java.lang.String</classname> <description>CSS style for upload button</description> </property> <property> - <name>uploadStyleDisabled</name> + <name>uploadButtonClassDisabled</name> <classname>java.lang.String</classname> <description>CSS style for upload button disabled</description> </property> <property> - <name>cancelStyle</name> + <name>cancelButtonClass</name> <classname>java.lang.String</classname> <description>CSS style for cancel button</description> </property> <property> - <name>cancelStyleDisabled</name> + <name>cancelButtonClassDisabled</name> <classname>java.lang.String</classname> <description>CSS style for cancel button disabled</description> </property> <property> - <name>cleanStyle</name> + <name>cleanButtonClass</name> <classname>java.lang.String</classname> <description>CSS style for clean button</description> </property> <property> - <name>cleanStyleDisabled</name> + <name>cleanButtonClassDisabled</name> <classname>java.lang.String</classname> <description>CSS style for clean button disabled</description> </property> <property> + <name>uploadListClass</name> + <classname>java.lang.String</classname> + <description>CSS style for upload list</description> + </property> + <property> + <name>uploadListClassDisabled</name> + <classname>java.lang.String</classname> + <description>CSS style for upload list disabled</description> + </property> + <property> + <name>fileEntryClass</name> + <classname>java.lang.String</classname> + <description>CSS style upload file entry</description> + </property> + <property> + <name>fileEntryClassDisabled</name> + <classname>java.lang.String</classname> + <description>CSS style upload file entry disabled</description> + </property> + <property> + <name>fileEntryControlClass</name> + <classname>java.lang.String</classname> + <description>CSS style for upload enrty control</description> + </property> + <property> + <name>fileEntryControlClassDisabled</name> + <classname>java.lang.String</classname> + <description>CSS style for upload enrty control disabled</description> + </property> + <property> <name>fileUploadListener</name> <classname>javax.el.MethodExpression</classname> <description> @@ -150,6 +180,30 @@ </description> </property> <property> + <name>listWidth</name> + <classname>java.lang.String</classname> + <description> + Defines width of file list + </description> + <defaultvalue>"400px"</defaultvalue> + </property> + <property> + <name>listHeight</name> + <classname>java.lang.String</classname> + <description> + Defines height of file list + </description> + <defaultvalue>"210px"</defaultvalue> + </property> + <property> + <name>disabled</name> + <classname>boolean</classname> + <description> + Disabled attribute + </description> + <defaultvalue>false</defaultvalue> + </property> + <property> <name>onupload</name> <classname>java.lang.String</classname> </property> @@ -164,7 +218,7 @@ <property> <name>onerror</name> <classname>java.lang.String</classname> - </property> + </property> </component> - &listeners; -</components> + &listeners; +</components> Modified: trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/css/fileUpload.xcss =================================================================== --- trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/css/fileUpload.xcss 2008-02-21 15:10:08 UTC (rev 6250) +++ trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/css/fileUpload.xcss 2008-02-21 15:20:33 UTC (rev 6251) @@ -13,9 +13,8 @@ table{width : 100%} .upload_table_td{border-bottom:1px solid #c0c0c0 /*tableBorderColor*/;white-space : nowrap;} -.upload_list_width{ width:400px;} .upload_list_decor{ border:1px solid #c0c0c0 /*tableBorderColor*/; background : #FFFFFF /*tableBackgroundColor*/;} -.upload_list_overflow{height : 210px; overflow : auto; overflow-x : hidden;} +.upload_list_overflow{overflow : auto; overflow-x : hidden;} .upload_name{ width : 100%; height : 50px; padding : 2px 10px 2px 10px;} .upload_del{ width : 90px; text-align : center; padding-top : 3; padding-bottom : 3;} .upload_scroll{ width : 10px; text-align : center;} Modified: trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js =================================================================== --- trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js 2008-02-21 15:10:08 UTC (rev 6250) +++ trunk/sandbox/ui/fileUpload/src/main/resources/org/richfaces/renderkit/html/js/FileUpload.js 2008-02-21 15:20:33 UTC (rev 6251) @@ -2,40 +2,46 @@ FileUploadEntry = Class.create(); FileUploadEntry.clearControlTemplate = + [ new E('a', { - 'style':'text-decoration: none; color:black', + 'style':'', 'onclick': function (context) { return 'var entry = FileUploadEntry.getComponent(this); entry.uploadObject.clear(entry); return false;';}, - 'className':'upload_anc', + 'className':function (context) { return 'upload_anc ' + Richfaces.evalMacro("className", context); }, 'href':'#' }, [ new T('Clear') - ]); + ]) + ]; FileUploadEntry.stopControlTemplate = + [ new E('a', { - 'style':'text-decoration: none; color:black', + 'style':'', 'onclick': function (context) { return 'FileUploadEntry.getComponent(this).uploadObject.stop(); return false;';}, - 'className':'upload_anc', + 'className':function (context) { return 'upload_anc ' + Richfaces.evalMacro("className", context); }, 'href':'#' }, [ new T('Stop') - ]); + ]) + ]; FileUploadEntry.cancelControlTemplate = + [ new E('a', { - 'style':'text-decoration: none; color:black', + 'style':'', 'onclick': function (context) { return 'var entry = FileUploadEntry.getComponent(this); entry.uploadObject.clear(entry); return false;';}, - 'className':'upload_anc', + 'className':function (context) { return 'upload_anc ' + Richfaces.evalMacro("className", context); }, 'href':'#' }, [ new T('Cancel') - ]); + ]) + ]; FileUploadEntry.template = [ @@ -46,7 +52,7 @@ [ new E('tr',{}, [ - new E('td',{'className':'upload_font upload_name upload_table_td'}, + new E('td',{'className':function (context) { return 'upload_font upload_name upload_table_td ' + Richfaces.evalMacro("className", context);}}, [ new E('div',{'className':'upload_name_padding'}, [ @@ -189,11 +195,14 @@ Element.insert(this.statusLabel, FileUploadEntry.LABELS[newState]); if (newState == FileUploadEntry.UPLOAD_IN_PROGRESS) { - Element.insert(this.controlArea, FileUploadEntry.stopControlTemplate.getContent()); + //Element.insert(this.controlArea, FileUploadEntry.stopControlTemplate.getContent()); + Element.update(this.controlArea, FileUploadEntry.stopControlTemplate.invoke('getContent',{'className': this.uploadObject.classes.FILE_ENTRY_CONTROL.ENABLED}).join('')); } else if (newState == FileUploadEntry.READY) { - Element.insert(this.controlArea, FileUploadEntry.cancelControlTemplate.getContent()); + //Element.insert(this.controlArea, FileUploadEntry.cancelControlTemplate.getContent()); + Element.update(this.controlArea, FileUploadEntry.cancelControlTemplate.invoke('getContent',{'className': this.uploadObject.classes.FILE_ENTRY_CONTROL.ENABLED}).join('')); } else { - Element.insert(this.controlArea, FileUploadEntry.clearControlTemplate.getContent()); + //Element.insert(this.controlArea, FileUploadEntry.clearControlTemplate.getContent()); + Element.update(this.controlArea, FileUploadEntry.clearControlTemplate.invoke('getContent',{'className': this.uploadObject.classes.FILE_ENTRY_CONTROL.ENABLED}).join('')); } if (newState == FileUploadEntry.UPLOAD_SUCCESS) { @@ -354,16 +363,17 @@ classes: null, events: null, - + maxFileBatchSize: null, - initialize: function(id, stopScript, getFileSizeScript, progressBarId, classes, label, maxFiles, events, options) { + initialize: function(id, stopScript, getFileSizeScript, progressBarId, classes, label, maxFiles, events, disabled, options) { this.id = id; this.element = $(this.id); this._progressBar = $(progressBarId); this.progressBar = this._progressBar.component; this.labelMarkup = label; + this.disabled = disabled; this.element.component = this; @@ -421,6 +431,7 @@ }, add: function(elt) { + if (this.disabled) return; var newEntry = new FileUploadEntry(elt, this); this.entries.push(newEntry); @@ -461,6 +472,7 @@ }, upload: function() { + if (this.disabled) return; this.runUpload = true; if (!this.activeEntry) { @@ -474,6 +486,7 @@ }, stop: function() { + if (this.disabled) return; this.runUpload = false; if (this.activeEntry) { @@ -482,6 +495,7 @@ }, clear: function(entry) { + if (this.disabled) return; if (entry) { this.remove(entry); } else { @@ -504,9 +518,9 @@ }, processButtons: function () { - this.disableAddButton(this.maxFileBatchSize && this.entries.length >= this.maxFileBatchSize); - this.disableCleanButton(this.cleanAllDisabled()); - this.disableUploadButton(this.uploadAllDisabled()); + this.disableAddButton(this.disabled || this.maxFileBatchSize && this.entries.length >= this.maxFileBatchSize); + this.disableCleanButton(this.disabled || this.cleanAllDisabled()); + this.disableUploadButton(this.disabled || this.uploadAllDisabled()); this.switchUploadButton(); }, @@ -578,6 +592,28 @@ $(this.id + ":upload1").className = (disabled? this.classes.UPDATE.DISABLED : this.classes.UPDATE.ENABLED); $(this.id + ":upload2").className = (disabled? this.classes.UPDATE_CONTENT.DISABLED : this.classes.UPDATE_CONTENT.ENABLED); }, + + disable: function () { + this.disabled = true; + this.items.className = "upload_list_overflow " + this.classes.UPLOAD_LIST.DISABLED; + for (var i = 0; i < this.entries.length; i++) { + var entry = this.entries[i]; + entry.entryElement.rows[0].cells[0].className = "upload_font upload_name upload_table_td " + this.classes.FILE_ENTRY.DISABLED; + entry.controlArea.firstChild.className = "upload_anc " + this.classes.FILE_ENTRY_CONTROL.DISABLED; + } + this.processButtons(); + }, + + enable: function () { + this.disabled = false; + this.items.className = "upload_list_overflow " + this.classes.UPLOAD_LIST.ENABLED; + for (var i = 0; i < this.entries.length; i++) { + var entry = this.entries[i]; + entry.entryElement.rows[0].cells[0].className = "upload_font upload_name upload_table_td " + this.classes.FILE_ENTRY.ENABLED; + entry.controlArea.firstChild.className = "upload_anc " + this.classes.FILE_ENTRY_CONTROL.ENABLED; + } + this.processButtons(); + }, _endUpload: function() { this.activeEntry = null; Modified: trunk/sandbox/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx =================================================================== --- trunk/sandbox/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx 2008-02-21 15:10:08 UTC (rev 6250) +++ trunk/sandbox/ui/fileUpload/src/main/templates/org/richfaces/fileUpload.jspx 2008-02-21 15:20:33 UTC (rev 6251) @@ -22,7 +22,23 @@ <f:clientId var="clientId" /> -<div class="upload_list_width upload_list_decor" id="#{clientId}"> + <jsp:scriptlet> + <![CDATA[ + boolean disabled = (Boolean)component.getAttributes().get("disabled"); + String addButtonClass = (disabled) ? "upload_button_dis upload_font " + (String)component.getAttributes().get("addButtonClassDisabled") + : "upload_button upload_font " + (String)component.getAttributes().get("addButtonClass"); + String addButtonClassContent = (disabled) ? "upload_button_content upload_font upload_ico upload_ico_add_dis " + (String)component.getAttributes().get("addButtonClassDisabled") + : "upload_button_content upload_font upload_ico upload_ico_add " + (String)component.getAttributes().get("addButtonClass"); + String uploadListClass = (disabled) ? (String)component.getAttributes().get("uploadListClassDisabled") : (String)component.getAttributes().get("uploadListClass"); + variables.setVariable("addButtonClass",addButtonClass); + variables.setVariable("addButtonClassContent",addButtonClassContent); + variables.setVariable("uploadListClass",uploadListClass); + + ]]> +</jsp:scriptlet> + + +<div class="upload_list_decor" style="width: #{component.attributes['listWidth']}" id="#{clientId}"> <iframe name="#{clientId}" id="#{clientId}_iframe" style="display: none;"/> @@ -37,10 +53,10 @@ <tr> <td> <div class="upload_button_border" style=" float:left;"> - <div class="upload_button upload_font #{component.attributes['addStyle']}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" onmouseout="this.className='upload_button upload_font'" + <div class="#{addButtonClass}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" onmouseout="this.className='upload_button upload_font'" style="position: relative; overflow: hidden; width:70px" id="#{clientId}:add1"> - <div class="upload_button_content upload_font upload_ico upload_ico_add #{component.attributes['addStyle']}" + <div class="#{addButtonClassContent}" id="#{clientId}:add2" style="direction: rtl;">Add...</div> <input type="file" style="cursor: pointer; z-index: 3; right: -10px; top: -10px; font-size: 10em; position: absolute" class="hidden" @@ -50,12 +66,12 @@ </div> </div> <div class="upload_button_border" style=" float:left;"> - <div class="upload_button upload_font #{component.attributes['uploadStyleDisabled']}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" + <div class="upload_button upload_font #{component.attributes['uploadButtonClassDisabled']}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" onmouseout="this.className='upload_button upload_font'" id="#{clientId}:upload1" onclick="return $('#{clientId}').component.upload();"> <a href="#" class="upload_button_selection"> - <div class="upload_button_content upload_font upload_ico upload_ico_start_dis #{component.attributes['uploadStyleDisabled']}" + <div class="upload_button_content upload_font upload_ico upload_ico_start_dis #{component.attributes['uploadButtonClassDisabled']}" id="#{clientId}:upload2"> <b>Upload</b> </div> @@ -68,12 +84,12 @@ <!-- --> <div class="upload_button_border" style=" float:right"> - <div class="upload_button_dis upload_font #{component.attributes['cleanStyleDisabled']}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" + <div class="upload_button_dis upload_font #{component.attributes['cleanButtonClassDisabled']}" onmouseover="this.className='upload_button_light upload_font'" onmousedown="this.className='upload_button_press upload_font'" onmouseup="this.className='upload_button upload_font'" onmouseout="this.className='upload_button upload_font'" onclick="return $('#{clientId}').component.clear();" id="#{clientId}:clean1"> <a href="#" class="upload_button_selection"> - <div class="upload_button_content upload_font upload_ico upload_ico_clear_dis #{component.attributes['cleanStyleDisabled']}" + <div class="upload_button_content upload_font upload_ico upload_ico_clear_dis #{component.attributes['cleanButtonClassDisabled']}" id="#{clientId}:clean2">Clean All</div> </a> </div> @@ -82,7 +98,7 @@ </tr> </table> - <div class="upload_list_width upload_list_overflow" id="#{clientId}:fileItems"> + <div class="upload_list_overflow #{uploadListClass}" style="width: #{component.attributes['listWidth']}; height: #{component.attributes['listHeight']}" id="#{clientId}:fileItems"> </div> @@ -90,38 +106,50 @@ <script type="text/javascript"> FileUpload.CLASSES = { ADD : { - ENABLED : 'upload_button upload_font #{component.attributes["addStyle"]}', - DISABLED : 'upload_button_dis upload_font #{component.attributes["addStyleDisabled"]}' + ENABLED : 'upload_button upload_font #{component.attributes["addButtonClass"]}', + DISABLED : 'upload_button_dis upload_font #{component.attributes["addButtonClassDisabled"]}' }, ADD_CONTENT : { - ENABLED : 'upload_button_content upload_font upload_ico upload_ico_add #{component.attributes["addStyle"]}', - DISABLED : 'upload_button_content upload_font upload_ico upload_ico_add_dis #{component.attributes["addStyleDisabled"]}' + ENABLED : 'upload_button_content upload_font upload_ico upload_ico_add #{component.attributes["addButtonClass"]}', + DISABLED : 'upload_button_content upload_font upload_ico upload_ico_add_dis #{component.attributes["addButtonClassDisabled"]}' }, UPDATE : { - ENABLED : 'upload_button upload_font #{component.attributes["uploadStyle"]}', - DISABLED : 'upload_button_dis upload_font #{component.attributes["uploadStyleDisabled"]}' + ENABLED : 'upload_button upload_font #{component.attributes["uploadButtonClass"]}', + DISABLED : 'upload_button_dis upload_font #{component.attributes["uploadButtonClassDisabled"]}' }, UPDATE_CONTENT : { - ENABLED : 'upload_button_content upload_font upload_ico upload_ico_start #{component.attributes["uploadStyle"]}', - DISABLED : 'upload_button_content upload_font upload_ico upload_ico_start_dis #{component.attributes["uploadStyleDisabled"]}' + ENABLED : 'upload_button_content upload_font upload_ico upload_ico_start #{component.attributes["uploadButtonClass"]}', + DISABLED : 'upload_button_content upload_font upload_ico upload_ico_start_dis #{component.attributes["uploadButtonClassDisabled"]}' }, CANCEL : { - ENABLED : 'upload_button upload_font #{component.attributes["cancelStyle"]}', - DISABLED : 'upload_button_dis upload_font #{component.attributes["cancelStyleDisabled"]}' + ENABLED : 'upload_button upload_font #{component.attributes["cancelButtonClass"]}', + DISABLED : 'upload_button_dis upload_font #{component.attributes["cancelButtonClassDisabled"]}' }, CANCEL_CONTENT : { - ENABLED : 'upload_button_content upload_font upload_ico upload_ico_stop #{component.attributes["cancelStyle"]}', - DISABLED : 'upload_button_content upload_font upload_ico upload_ico_stop_dis #{component.attributes["cancelStyleDisabled"]}' + ENABLED : 'upload_button_content upload_font upload_ico upload_ico_stop #{component.attributes["cancelButtonClass"]}', + DISABLED : 'upload_button_content upload_font upload_ico upload_ico_stop_dis #{component.attributes["cancelButtonClassDisabled"]}' }, CLEAN : { - ENABLED : 'upload_button upload_font #{component.attributes["cleanStyle"]}', - DISABLED : 'upload_button_dis upload_font #{component.attributes["cleanStyleDisabled"]}' + ENABLED : 'upload_button upload_font #{component.attributes["cleanButtonClass"]}', + DISABLED : 'upload_button_dis upload_font #{component.attributes["cleanButtonClassDisabled"]}' }, CLEAN_CONTENT : { - ENABLED : 'upload_button_content upload_font upload_ico upload_ico_clear #{component.attributes["cleanStyle"]}', - DISABLED : 'upload_button_content upload_font upload_ico upload_ico_clear_dis #{component.attributes["cleanStyleDisabled"]}' + ENABLED : 'upload_button_content upload_font upload_ico upload_ico_clear #{component.attributes["cleanButtonClass"]}', + DISABLED : 'upload_button_content upload_font upload_ico upload_ico_clear_dis #{component.attributes["cleanButtonClassDisabled"]}' + }, + FILE_ENTRY : { + ENABLED : '#{component.attributes["fileEntryClass"]}', + DISABLED : '#{component.attributes["fileEntryClassDisabled"]}' + }, + FILE_ENTRY_CONTROL : { + ENABLED : '#{component.attributes["fileEntryControlClass"]}', + DISABLED : '#{component.attributes["fileEntryControlClassDisabled"]}' + }, + UPLOAD_LIST : { + ENABLED : '#{component.attributes["uploadListClass"]}', + DISABLED : '#{component.attributes["uploadListClassDisabled"]}' } - }; + }; var events = { onupload : #{this:getAsEventHandler(context, component, "onupload")}, @@ -130,7 +158,7 @@ onerror : #{this:getAsEventHandler(context, component, "onerror")} }; - new FileUpload('#{clientId}', #{this:getStopScript(context, component)}, #{this:getFileSizeScript(context, component)} ,'#{this:getProgressBarId(context, component)}', FileUpload.CLASSES, #{this:getLabelMarkup(context, component)}, '#{component.attributes["maxFiles"]}', events); + new FileUpload('#{clientId}', #{this:getStopScript(context, component)}, #{this:getFileSizeScript(context, component)} ,'#{this:getProgressBarId(context, component)}', FileUpload.CLASSES, #{this:getLabelMarkup(context, component)}, '#{component.attributes["maxFiles"]}', events, #{component.attributes["disabled"]}); </script> </span>