<?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 uploadData="#{bean.data}"/> 
...]]></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>

        <!--maintenance of component  orderingList-->

        <para>The <emphasis role="bold">
                <property>&lt;rich:fileUpload&gt;</property>
        </emphasis> component consists of two parts:<itemizedlist>
            <listitem><property>List of files</property> which contains the list of currently chosen files with possibility to manage every file.
            </listitem>
                <listitem>
                    <property>Component controls</property>- the bar with controls for managing the whole component.
                    
                </listitem>
            </itemizedlist>
        </para>

    
        <!--para><emphasis>
            <property> &quot;uploadData&quot;</property>
        </emphasis> attribute shows the collection of files uploaded. With the help of this attribute you can define the place to upload data.</para-->
        <para>
            The <emphasis>
                <property> &quot;disabled&quot;</property>
            </emphasis> 
            attribute is used to disable all elements of the component. All the controls disables too.  </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload disabled="true" uploadData="#{bean.data}" />
...]]></programlisting>
        <para>This is a 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>
                <property> &quot;acceptedTypes&quot;</property></emphasis> attribute is used to define file types which are accepted to upload.
            </para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" acceptedTypes="html"/>
 ...]]></programlisting>
        <para>As it could be seen in the example above, only files with "html" extension are accepted to upload.</para>
       
        <para>The <emphasis>
            <property> &quot;autoclear&quot;</property></emphasis> attribute is used to remove automatically files from list after upload completed.</para>
        
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true"
 acceptedTypes="html"/>
 ...]]></programlisting>
            <para>As it could be seen in the example above, files removes from list after upload completed.</para>
        <para>The <emphasis>
            <property> &quot;maxFilesQuantity&quot;</property></emphasis> defines max number of files allowed for upload. 
            After number of files in the list is equals to this attribute – add button is disabled.
            The add button is not available until all list items are uploaded.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2"
 acceptedTypes="html"/>
 ...]]></programlisting>
        <para>This is a 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>       
        <para>As it could be seen in the picture above, only 2 files allows for upload.</para>
        <para>The <emphasis>
            <property> &quot;fileUploadedListener&quot;</property></emphasis> is 
            called at server side after every file uploaded and used for the file saving by end developer.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" 
 acceptedTypes="html"/>
 ...]]></programlisting>
        <para>The <emphasis>
            <property> &quot;immediateUpload&quot;</property></emphasis> attribute allows files to be uploaded immediately after they have been added into list.
            If you set this attribute to true files immediately uploads after they have been added into list, all next files automatically uploads one by one.
            If you cancel uploading – next files aren't start uploading till you press the general upload button or clear the list.
            
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" 
 acceptedTypes="html" immediateUpload="true"/>
 ...]]></programlisting>
        <para>The <emphasis role="bold">
            <property>&lt;rich:fileUpload&gt;</property>
        </emphasis> provides using a number of handlers. The <emphasis>
            <property> &quot;onupload&quot;</property></emphasis> is available to cancel the upload at client side. The <emphasis>
                <property> &quot;onuploadcomplete&quot;</property></emphasis> is called after all files in from list uploaded. The <emphasis>
                    <property> &quot;onuploadcanceled&quot;</property></emphasis> is called after upload was canceled via cancel control. The <emphasis>
                        <property> &quot;onerror&quot;</property></emphasis> is called if the file upload was interrupted according to any errors.</para>
        <para>
            There are 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>. <emphasis>
                              <property> &quot;label&quot;</property></emphasis> facet could be used to provide displaying the progress of uploading.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" 
 acceptedTypes="html">
        <f:facet name="label">
                <h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}"></h:outputText>
        </f:facet>
</rich:fileUpload>
...]]></programlisting>
        <para>This is a 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/fileUpload6.png"/>
                </imageobject>
            </mediaobject>
        </figure>       
        <para>As it could be seen in the picture above, the label displays under the item.</para>
        <para>Labels of <property>component controls</property> can be defined with <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></para>
        <para>The <emphasis role="bold">
            <property>&lt;rich:fileUpload&gt;</property>
        </emphasis> component allows to use sizes attributes: 
        <itemizedlist>
            <listitem><emphasis>
                <property> &quot;listHeight&quot;</property></emphasis> attribute specify height for list of files in pixels
            </listitem>
            <listitem><emphasis>
                <property> &quot;listWidth&quot;</property></emphasis> attribute specify width for list of files in pixels.
            </listitem>
            </itemizedlist>
        </para>
          
        <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,  RICH_FILE_UPLOAD_STOP_LABEL,  
                RICH_FILE_UPLOAD_ADD_LABEL, RICH_FILE_UPLOAD_UPLOAD_LABEL, RICH_FILE_UPLOAD_CLEAR_LABEL, 
                RICH_FILE_UPLOAD_CLEAR_ALL_LABEL, RICH_FILE_UPLOAD_PROGRESS_LABEL,  RICH_FILE_UPLOAD_SIZE_ERROR_LABLE,  
                RICH_FILE_UPLOAD_TRANSFER_ERROR_LABLE, RICH_FILE_UPLOAD_ENTRY_STOP_LABEL, RICH_FILE_UPLOAD_ENTRY_CLEAR_LABEL, 
                RICH_FILE_UPLOAD_ENTRY_CANCEL_LABEL</property>  there.</para>
       
        
        <!-- ordering control set>
             
        <table>
            <title>Keyboard usage for elements selection</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Keys and combinations </entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <Sorting API >
                    <row>
                        <entry>CTRL+click</entry>
                        <entry>Inverts selection for an item</entry>
                    </row>
                    <row>
                        <entry>SHIFT+click</entry>
                        <entry>Selects all rows from active one to a clicked row if they differ,
                            else select the active row. All other selections are cleared</entry>
                    </row>
                    <row>
                        <entry>CTRL+A</entry>
                        <entry>Selects all elements inside the list if some active element is
                            already present in a list</entry>
                    </row>
                    <row>
                        <entry>Up, Down arrows</entry>
                        <entry>Changes the active and selected elements to the next or previous in a list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table-->
    </section>

    <!--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>copy()</entry>
                        <entry>Copies selected item from the source list to the target list</entry>
                    </row>
                    <row>
                        <entry>remove()</entry>
                        <entry>Removes selected item from the target list to the source list</entry>
                    </row>
                    <row>
                        <entry>copyAll()</entry>
                        <entry>Copies all items from the source list to the target list</entry>
                    </row>
                    <row>
                        <entry>removeAll()</entry>
                        <entry>Removes all items from the target list to the source list</entry>
                    </row>
                    <row>
                        <entry>getSelection()</entry>
                        <entry>Returns currently selected item</entry>
                    </row>
                    <row>
                        <entry>getItems()</entry>
                        <entry>Returns the collection of all items</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </section-->

    <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 list</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 an items</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 cancel link</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 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 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 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>
                    
                </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>trimColor</entry>
                        <entry>background-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a disabled add 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 start 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 clear 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/fileUploadCN.png"/>
                </imageobject>
            </mediaobject>
          
        </figure>

        <table id="fileUploadCN">
            <title>Classes names that define a list representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_list_decor</entry>
                        <entry>Defines styles for a wrapper &lt;table&gt; element of a fileUpload</entry>
                    </row>
                    
                    <row>
                        <entry>upload_font</entry>
                        <entry>Defines styles for a font of buttons and items</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define toolbar representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_toolbar_decor</entry>
                        <entry>Defines styles for a toolbar</entry>
                    </row>
        
                  </tbody>
            </tgroup>
        </table>
                      
               
        <table >
            <title>Classes names that define items representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_anc</entry>
                        <entry>Defines styles for a cancel link</entry>
                    </row>
                    <row>
                        <entry>upload_table_td</entry>
                        <entry>Defines styles for an items</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>upload_button_border</entry>
                        <entry>Defines styles for a border of buttons</entry>
                    </row>
                    <row>
                        <entry>upload_button</entry>
                        <entry>Defines styles for a buttons</entry>
                    </row>
                    <row>
                        <entry>upload_button_light</entry>
                        <entry>Defines styles for a highlight of  button</entry>
                    </row>
                    <row>
                        <entry>upload_button_press</entry>
                        <entry>Defines styles for a pressed button</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define disabled add button icon representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_ico_add_dis</entry>
                        <entry>Defines styles for a disabled add button icon</entry>
                    </row>
                              
                </tbody>
            </tgroup>
        </table>
                       
        
        
        <table >
            <title>Classes names that define disabled upload button icon representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_ico_start_dis</entry>
                        <entry>Defines styles for a disabled upload button icon</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table >
            <title>Classes names that define disabled clear button icon representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>upload_ico_clear_dis</entry>
                        <entry>Defines styles for a disabled clear button icon</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[...
..upload_list_decor{
background-color:#ecf4fe;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload10.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example the background color for list is 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 a result:</para>
        
        <figure>
            <title>Redefinition styles with own classes and styleClass attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/fileUpload9.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font style for add 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>
