<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:fileUpload</keyword>
            <keyword>fileUpload</keyword>
        </keywordset>
    </sectioninfo>
    <table>
        <title>Component identification parameters</title>
        <tgroup cols="2">
            <thead>
                <row>
                    <entry>Name</entry>
                    <entry>Value</entry>
                </row>
            </thead>
            <tbody>
                <row>
                    <entry>component-type</entry>
                    <entry>org.richfaces.component.FileUpload</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlFileUpload</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.component.FileUpload</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.renderkit.html.FileUploadRenderer</entry>
                </row>
                 <row>
                    <entry>tag-class</entry>
                     <entry>org.richfaces.taglib.FileUploadTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>To create the simplest variant on a page use the following syntax:</para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload /> 
...]]></programlisting>
    </section>
    <section>
        <title>Creating the Component Dynamically Using Java</title>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlFileUpload;
...	
HtmlFileUpload myFileUpload = new HtmlFileUpload();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component consists of two parts:<itemizedlist>
            <listitem>
                <para>
                    <property>List of files</property> which contains the list of currently chosen files to upload with possibility to manage every file
                </para>
            </listitem>
                <listitem>
                    <para>
                    <property>Component controls</property> - the bar with controls for managing the whole component
                    </para>
                </listitem>
            </itemizedlist>
        </para>


        <para>
            There are two places where uploaded files are stored:
        </para>
            <itemizedlist>
                <listitem>
                    <para>
                        In the temporary folder (depends on OS) if the value of the <property>createTempFile</property> parameter in <property>Ajax4jsf Filter</property> section
                        is &quot;true&quot; (by Default)
                    </para>
                    <programlisting role="XML"><![CDATA[...
<init-param>
        <param-name>createTempFiles</param-name>
        <param-value>true</param-value>
</init-param>
...]]></programlisting>           
                </listitem>
                <listitem>
                    <para>
                        In the RAM if the value of the <property>createTempFile</property> parameter in <property>Ajax4jsf Filter</property> section
                        is &quot;false&quot;. This is a better way for storing small-sized files.
                    </para>
                </listitem>
            </itemizedlist>

        <para>
          The <emphasis><property>&quot;uploadData&quot;</property></emphasis> attribute 
           defines the collection of files uploaded. See the example below. 
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}"/>
...]]></programlisting>

        <para>The <emphasis><property>&quot;fileUploadedListener&quot;</property></emphasis> is 
            called at server side after every file uploaded and used for the saving files from temporary folder or RAM.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}"/>
 ...]]></programlisting>


        <para>
            Immediately files uploading could be performed by means of the <emphasis><property> &quot;immediateUpload&quot;</property></emphasis> attribute.
            If the value of this attribute is &quot;true&quot; files are uploaded immediately once they have been added into the list. 
            All next files in the list are uploaded automatically one by one.
            If you cancel uploading process next files aren&apos;t started to upload till you press the &quot;Upload&quot; button or clear the list.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}" immediateUpload="true"/>
 ...]]></programlisting>

        <para>
            The <emphasis><property> &quot;autoclear&quot;</property></emphasis> attribute is used to remove automatically files from the list after upload completed.
            See the simple example below.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" autoclear="true"/>
...]]></programlisting>


<!--RESTRICTIONS-->
        
<para>
    The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component provides following restrictions:
</para>
    <itemizedlist>
        <listitem>
            <para>
                By <property> file types</property>, use <emphasis><property> &quot;acceptedTypes&quot;</property></emphasis> attribute 
                to define file types accepted by component.
                In the example below only files with &quot;html&quot; and &quot;jpg&quot; extensions are accepted to upload.
            </para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
<programlisting role="XML"><![CDATA[...
<rich:fileUpload acceptedTypes="html, jpg"/>
...]]></programlisting>
        </listitem>
        <listitem>
            <para>
                By <property> file size</property>, use the <property>maxRequestSize</property> parameter(value in bytes) inside <property>Ajax4jsf Filter</property> section 
                in <property>web.xml</property>:
            </para>
            <programlisting role="XML"><![CDATA[...
<init-param>
        <param-name>maxRequestSize</param-name>
        <param-value>1000000</param-value>
</init-param>
...]]></programlisting>
        </listitem>
        <listitem>
            <para>
                By <property>max files quantity</property>, use the <emphasis><property> &quot;maxFilesQuantity&quot;</property></emphasis> attribute 
                to define max number of files allowed to be uploaded. After a number of files in the list equals to the value of this attribute &quot;Add&quot; button is disabled.
                As it could be seen in the example below, only 2 files are accepted for uploading.
            </para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:fileUpload maxFilesQuantity="2"/>
 ...]]></programlisting>
            <para>
                This is the result:
            </para>
            <figure>
                <title><emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis>with 
                    <emphasis><property> &quot;maxFilesQuantity&quot;</property></emphasis> attribute</title>
                <mediaobject>
                    <imageobject>
                        <imagedata fileref="images/fileUpload5.png"/>
                    </imageobject>
                </mediaobject>
            </figure>       
        </listitem>
    </itemizedlist>

   
        <para>The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component 
            provides a number of specific event attributes: 
        </para>
            <itemizedlist>
                <listitem>
                    <para>
                        The <emphasis><property> &quot;onupload&quot;</property></emphasis> which gives you a possibility to cancel the upload at client side            
                    </para>
                </listitem>
                <listitem>
                    <para>
                        The <emphasis><property> &quot;onuploadcomplete&quot;</property></emphasis> which is called after all files from the list are uploaded            
                    </para>
                </listitem>
                <listitem>
                    <para>
                        The <emphasis><property> &quot;onuploadcanceled&quot;</property></emphasis> which is called after upload has been canceled via cancel control            
                    </para>
                </listitem>
                <listitem>
                    <para>
                        The <emphasis><property> &quot;onerror&quot;</property></emphasis> which is called if the file upload was interrupted according to any errors          
                    </para>
                </listitem>
            </itemizedlist>    
            
        
        <para>
            In order to customize the information regarding the ongoing process you could use <emphasis><property>&quot;label&quot;</property></emphasis> facet
            with the following macrosubstitution:
            <itemizedlist>
                <listitem>
                    <para>
                        {B}, {KB}, {MB} contains the size of file uploaded in bytes, kilobytes, megabytes respectively 
                    </para>
                </listitem>
                <listitem>
                    <para>
                        {_B}, {_KB}, {_MB} contains the remain file size to upload in bytes, kilobytes, megabytes respectively 
                    </para>
                </listitem>
                <listitem>
                    <para>
                        {ss} , {mm}, {hh}  contains elapsed time in seconds, minutes and hours respectively
                    </para>
                </listitem>
            </itemizedlist>
        </para>
                    
            <!--
            There is a number of facets providing for this component:
           <emphasis>
                    <property> &quot;header&quot;</property></emphasis>
              
                    <emphasis>
                        <property> &quot;footer&quot;</property></emphasis>
                      <emphasis>
                          <property> &quot;label&quot;</property></emphasis>.  could be used to provide displaying the progress of uploading.
            -->
       
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}">
        <f:facet name="label">
                <h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" />
        </f:facet>
</rich:fileUpload>
...]]></programlisting>
        <para>This is the result:</para>
        <figure>
            <title>
                <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> 
                with <emphasis><property> &quot;label&quot;</property></emphasis> facet
            </title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload_labelfacet.png"/>
                </imageobject>
            </mediaobject>
        </figure>       
        
        <para>You could define labels of the <property>component controls</property> with the help of 
            <emphasis><property> &quot;addControlLabel&quot;</property></emphasis>, 
            <emphasis><property> &quot;clearAllControlLabel&quot;</property></emphasis>, 
            <emphasis><property> &quot;clearControlLabel&quot;</property></emphasis>, 
            <emphasis><property> &quot;stopEntryControlLabel&quot;</property></emphasis>, 
            <emphasis><property> &quot;uploadControlLabel&quot;</property></emphasis>
        attributes. See the following example.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload addControlLabel="Add file..." clearAllControlLabel="Clear all" clearControlLabel="Clear"
                        stopEntryControlLabel="Stop process" uploadControlLabel="Upload file"/>
...]]></programlisting>
<para>
    This is the result:
</para>        
        <figure>
            <title>
                <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> with labels
            </title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload_labels.png"/>
                </imageobject>
            </mediaobject>
        </figure>       
        <para>
            The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component allows to use sizes attributes:
        </para>
        <itemizedlist>
            <listitem>
                <para>
                <emphasis><property> &quot;listHeight&quot;</property></emphasis> attribute specify height for list of files in pixels
                </para>
            </listitem>
            <listitem>
                <para>
                <emphasis><property> &quot;listWidth&quot;</property></emphasis> attribute specify width for list of files in pixels
                </para>
            </listitem>
        </itemizedlist>
        
        <para>
            In order to disable the whole component you could use the <emphasis><property> &quot;disabled&quot;</property></emphasis> attribute.
            See the following example.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload disabled="true"/>
...]]></programlisting>
        <para>This is the result:</para>
        <figure>
            <title>
                <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis>with <emphasis><property> &quot;disabled&quot;</property></emphasis> attribute
            </title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload2.png"/>
                </imageobject>
            </mediaobject>
        </figure>       
          
        <para>The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component allows to use internationalization method 
            to redefine and localize the labels. You could use application resource bundle and define 
            <property>RICH_FILE_UPLOAD_CANCEL_LABEL</property>,  
            <property>RICH_FILE_UPLOAD_STOP_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_ADD_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_UPLOAD_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_CLEAR_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_CLEAR_ALL_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_PROGRESS_LABEL</property>,  
            <property>RICH_FILE_UPLOAD_SIZE_ERROR_LABLE</property>,  
            <property>RICH_FILE_UPLOAD_TRANSFER_ERROR_LABLE</property>, 
            <property>RICH_FILE_UPLOAD_ENTRY_STOP_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_ENTRY_CLEAR_LABEL</property>, 
            <property>RICH_FILE_UPLOAD_ENTRY_CANCEL_LABEL</property>  there.
        </para>
       
        

</section>
    <!-- JavaScript API-->  
    <section>
        <title>JavaScript API</title>
        <table> 
            <title>JavaScript API</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Function</entry>
                        <entry>Description</entry>  
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>enable()</entry>
                        <entry>Enables the component</entry>
                    </row>
                    <row>
                        <entry>disable()</entry>
                        <entry>Disables the component</entry>
                    </row>
                    <row>
                        <entry>stop()</entry>
                        <entry>Stops the uploading process</entry>
                    </row>
                    <row>
                        <entry>clear()</entry>
                        <entry>Clears list of files</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </section>
    <!-- End of JavaScript API-->   
    <section>
        <title>Look-and-Feel Customization</title>
        <para>For skinnability implementation, the components use a <emphasis>
                <property>style class redefinition method.</property>
            </emphasis> Default style classes are mapped on <emphasis>
                <property>skin parameters.</property>
            </emphasis></para>
        <para>There are two ways to redefine the appearance of all <emphasis role="bold">
                <property>&lt;rich:fileUpload&gt;</property>
            </emphasis> components at once: <itemizedlist>
                <listitem>Redefine the corresponding skin parameters</listitem>
                <listitem> Add to your style sheets style classes used by a <emphasis role="bold">
                        <property>&lt;rich:fileUpload&gt;</property>
                    </emphasis> component</listitem>
            </itemizedlist>
        </para>
    </section>

    <section>
        <title>Skin Parameters Redefinition</title>

        <table>
            <title>Skin parameters redefinition for a component</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>   
                </tbody>
            </tgroup>
        </table>
        
         <table>
            <title>Skin parameters redefinition for a font</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>                                
                </tbody>
            </tgroup>
         </table>
        
        <table>
            <title>Skin parameters redefinition for a toolbar</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>additionalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    <row>
                        <entry>tableBackgroundColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    <row>
                        <entry>tableBackgroundColor</entry>
                        <entry>border-left-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for items in the list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
               
        <table>
            <title>Skin parameters redefinition for a &quot;Cancel&quot;, &quot;Clear&quot; links</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalLinkColor</entry>
                        <entry>color</entry>
                    </row>
            </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for a button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                     <row>
                         <entry>trimColor</entry>
                         <entry>background-color</entry>
                    </row>                  
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a button border</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>                  
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a highlighted button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>trimColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>selectControlColor</entry>
                        <entry>border-color</entry>
                    </row>                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a pressed button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>selectControlColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>additionalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for &quot;Upload&quot;, &quot;Clean&quot; buttons</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a disabled &quot;Start&quot; button icon</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a disabled &quot;Clear&quot; button icon</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </section>

    <section>
        <title>Definition of Custom Style Classes</title>

        <para>The following picture illustrates how CSS classes define styles for component elements.</para>
        <figure>
            <title>Classes names</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload_cn1.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        <figure>
            <title>Classes names</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload_cn2.png"/>
                </imageobject>
            </mediaobject>
        </figure>

        <table id="fileUploadCN">
            <title>Classes names that define a component representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-fileupload-list-decor</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a fileUpload</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-font</entry>
                        <entry>Defines styles for a font of buttons and items</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-toolbar-decor</entry>
                        <entry>Defines styles for a toolbar</entry>
                    </row>
                    <row>
                        <entry> rich-fileupload-list-overflow</entry>
                        <entry>Defines styles for a list of files</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

                      
        <table >
            <title>Classes names that define buttons representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-fileupload-button</entry>
                        <entry>Defines styles for a buttons</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-button-border</entry>
                        <entry>Defines styles for a border of buttons</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-button-light</entry>
                        <entry>Defines styles for a highlight of  button</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-button-press</entry>
                        <entry>Defines styles for a pressed button</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-button-dis</entry>
                        <entry>Defines styles for a disabled button</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-button-selection</entry>
                        <entry>Defines styles for &quot;Upload&quot;, &quot;Clean&quot; buttons</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define the representation of the buttons' icons</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-fileupload-ico</entry>
                        <entry>Defines styles for an icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-add</entry>
                        <entry>Defines styles for a &quot;Add&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-start</entry>
                        <entry>Defines styles for a &quot;Upload&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-stop</entry>
                        <entry>Defines styles for a &quot;Stop&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-clear</entry>
                        <entry>Defines styles for a &quot;Clear&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-add-dis</entry>
                        <entry>Defines styles for a disabled &quot;Add&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-start-dis</entry>
                        <entry>Defines styles for a disabled &quot;Upload&quot; button icon</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-ico-clear-dis</entry>
                        <entry>Defines styles for a disabled &quot;Clear&quot; button icon</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define list items representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-fileupload-table-td</entry>
                        <entry>Defines styles for a wrapper &lt;td&gt; element of a list items</entry>
                    </row>
                    <row>
                        <entry>rich-fileupload-anc</entry>
                        <entry>Defines styles for &quot;Cancel&quot;, &quot;Stop&quot;, &quot;Clear&quot; links</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        
        <para>In order to redefine styles for all <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> components on a page 
            using CSS, it&apos;s enough to create classes with the same names 
            (possible classes could be found in the tables <link linkend="fileUploadCN"> above</link>) and define necessary properties in them. 
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-fileupload-anc{
    font-weight:bold;
    text-decoration:none;
}
...]]></programlisting>  
        
        <para>This is the result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload9.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example above the font weight and text decoration for &quot;Cancel&quot; and &quot;Clear&quot; links are changed.</para>
        
        <para>
            Also it’s possible to change styles of particular <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component. 
            In this case you should create own style classes and use them in the corresponding <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> 
            <property>styleClass</property> attributes. An example is placed below:
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.myClass{
        font-weight:bold;
}
...]]></programlisting>  
        <para>
            The <emphasis><property>&quot;addButtonClass&quot;</property></emphasis> attribute for 
            <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> is defined as it’s shown in the example below:
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[<rich:fileUpload ... addButtonClass="myClass"/>
]]></programlisting>    
        
        <para>This is the result:</para>
        <figure>
            <title>Redefinition styles with own classes and styleClass attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload10.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font style for &quot;Add&quot; button is changed.</para>
                       
    </section>
 
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink
            url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=fileUpload"
                >Here</ulink> you can see an example of <emphasis role="bold">
                <property>&lt;rich:fileUpload&gt;</property>
            </emphasis> usage and sources for the given example. </para>
    </section>

</section>

<!--para>In order to encode form around <emphasis role="bold">
    <property>&lt;rich:fileUpload&gt;</property>
    </emphasis> component you could confine this area by <emphasis role="bold">
    <property>&lt;h:form&gt;</property>
    </emphasis>/<emphasis role="bold">
    <property>&lt;/h:form&gt;</property></emphasis> tags.
    </para>
    <para>
    <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <h:form>
    <rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" 
    acceptedTypes="html" immediateUpload="true"/>
    <a4j:commandLink style="font-weight: bold; width: 200px;" value="Show files uploaded:" reRender="files_list">
    <h:dataTable value="#{bean.fileList}" var="file" id="files_list" style="width: 500px">
    <h:column>
    <h:outputText value="#{file.fileName}"></h:outputText>	
    </h:column>
    </h:dataTable>
    </h:form>
    ...]]></programlisting>
    <para>This is a result:</para>
    <figure>
    <title><emphasis role="bold">
    <property>&lt;rich:fileUpload&gt;</property>
    </emphasis>at server-side</title>
    <mediaobject>
    <imageobject>
    <imagedata fileref="images/fileUpload11.png"/>
    </imageobject>
    </mediaobject>
    </figure-->      
