### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 4.6. Upload Images

In the previous chapter we have discussed how to create Navigation Trees that represent "Shelves - Albums" hierarchy. Now it is time to upload images.

The <rich:fileUpload> component in the Photo Album application uses the embedded Flash module that adds extra functionality to the component:

- Multiple files choosing;

- Definition of permitted file types in the "Open File" dialog window;

- A number of additional client-side object properties.

The code for the <rich:fileUpload> is contained in the "/includes/fileUpload/fileUploader.xhtml" page:

    ...

    <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>

    ...

The "allowFlash" attribute set to "true" enables the Flash module.

The "acceptedTypes" attribute specifies "jpg", "jpeg" as the permitted file types you can upload.

The "fileUploadListener" attribute represents the action listener method `listener()` of the `FileUploadManager` class that is notified after file is uploaded. This method makes the main job on the upload:

    ...

        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();

        }

    ...

The `listener()` 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 `createTempFile` parameter is set to `true`. See the code from the `web.xml` descriptor:

    ...

    <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>

    ...

The `listener()` method creates an `Image` 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 dimensions in order to create thumbnails. After that the photo is added into the database the temporary file is removed.

Visit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter:

- FileUpload page for the <rich:fileUpload> component;

- AjaxSupport for the <a4j:support> component.

- Prev4.5. Image View
- Top of page
- Front page
- Next4.7. Context Menus