<?xml version="1.0" encoding="UTF-8"?>
<section>
	<title>Upload Images</title>
    <para>
    	In the previous chapter we have discussed how to create Navigation Trees
    	that represent &quot;Shelves - Albums&quot; hierarchy. 
    	Now it is time to upload images.           	
    </para>
    <para>
          The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component  
    	in the Photo Album application uses the embedded Flash module 
    	that adds extra functionality to the component:
    </para>
    <itemizedlist>
		<listitem>
			<para>Multiple files choosing;</para>
		</listitem>
        <listitem>
        	<para>Definition of permitted file types in the &quot;Open File&quot; dialog window;</para>
        </listitem>
		<listitem>
			<para>A number of additional client-side object properties.</para>
		</listitem>
    </itemizedlist>
    <para>
          The code for the <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> is contained in the &quot;/includes/fileUpload/fileUploader.xhtml&quot; page:   
    </para>
    <programlisting role="XML"><![CDATA[...
<rich:fileUpload
		allowFlash="true" maxFilesQuantity="100" autoclear="true"
		fileUploadListener="#{fileUploadManager.listener}" id="fileUpload"
		disabled="#{model.selectedAlbum == null}"
		immediateUpload="false" acceptedTypes="jpg,jpeg">
		<a4j:support event="onuploadcomplete" reRender="filesPanel, treeform" actionListener="#{fileWrapper.setComplete(true)}"/>
		<a4j:support event="onfileuploadcomplete" />
</rich:fileUpload>
...]]></programlisting>
	<para>
		The <emphasis><property>&quot;allowFlash&quot;</property></emphasis> attribute set to &quot;true&quot;
		enables the Flash module.
	</para>
	<para>
		The <emphasis><property>&quot;acceptedTypes&quot;</property></emphasis> attribute 
		specifies &quot;jpg&quot;, &quot;jpeg&quot; as the permitted file types you can upload.     
	</para>
	<para>
    	The <emphasis><property>&quot;fileUploadListener&quot;</property></emphasis> attribute 
    	represents the action listener method <code>listener()</code> of the <code>FileUploadManager</code>
    	class that is notified after file is uploaded.
    	This method makes the main job on the upload: 
    </para>
<programlisting role="JAVA"><![CDATA[...
	public void listener(UploadEvent event) throws Exception {
		UploadItem item = event.getUploadItem();
		Image image = constructImage(item);
		try {
			extractMetadata(item, image);
		} catch (Exception e1) {
			addError(item, image, Constants.FILE_PROCESSING_ERROR);
			return;
		}
		image.setAlbum(model.getSelectedAlbum());
		if(image.getAlbum() == null){
			addError(item, image, Constants.NO_ALBUM_TO_DOWNLOAD_ERROR);
			return;
		}
		try{
			if(imageAction.isImageWithThisPathExist(image)){
				image.setPath(generateNewPath(image.getPath()));
			}
			imageAction.addImage(image);
		}catch(Exception e){
			addError(item, image, Constants.IMAGE_SAVING_ERROR);
			return;
		}
		if(!fileManager.addImage(image.getFullPath(), item.getFile().getPath())){
			addError(item, image, Constants.FILE_SAVE_ERROR);
			return;
		}
		fileWrapper.getFiles().add(image);
		Events.instance().raiseEvent(Constants.IMAGE_ADDED_EVENT, image);
		item.getFile().delete();
	}
...]]></programlisting>
	<para>
		The <code>listener()</code> method is called at server side after every file uploaded 
		and server saves these files in a temporary folder or in RAM depending on configuration.  
		In the Photo Album application the uploaded files are stored in the temporary folder
		because the value of the <code>createTempFile</code> parameter is set to <code>true</code>. 
	    See the code from the <code>web.xml</code> descriptor:
	</para>

<programlisting role="XML"><![CDATA[...
<filter>
      <filter-name>Seam Filter</filter-name>
      <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
      <init-param>
            <param-name>createTempFiles</param-name>
            <param-value>true</param-value>
      </init-param>
      <init-param>
            <param-name>maxRequestSize</param-name>
            <param-value>20000000</param-value>
      </init-param>
</filter>
...]]></programlisting>
       <para>
             The <code>listener()</code> method creates an <code>Image</code> object 
             and extracts all image metadata such as Camera name, Image size, etc. 
             It performs scaling of an image and saves six different image's dimentions in order to create thumbnails. 
             After that the photo is added into the database 
			 the temporary file is removed.
       </para>
      
      <para>
            Vizit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter:
      </para>
      
      <itemizedlist>
            <listitem>
                  <para>
                        <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=fileUpload">FileUpload</ulink> page for the <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> component;
                  </para>     
            </listitem>
            
            <listitem>
                  <para>
                        <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component.
                  </para>     
            </listitem>
            
            
      </itemizedlist>   
      
      
</section>
