# Handling Images and Binary Data in Page Flows

The following topic explains how to handle binary data, such as BLOB data and image files, in page flows.

## Retrieving Binary Data

### Uploading Binary Data

You can upload binary data like any other file type, using the <netui:fileUpload> tag. When you use a <netui:fileUpload> tag, the parent <netui:form> tag must have its enctype attribute set to "multipart/form-data".

            <!--
            When using the <netui:fileUpload> tag, you must set the <netui:form> enctype attribute to 'multiple/form-data'.
            -->
            <netui:form action="submitInsert" enctype="multipart/form-data">
                Upload Image File:
                <netui:fileUpload dataSource="{actionForm.contentUp}"/>
                </br>
                <netui:imageButton src="/WebApp/resources/images/insert.gif"/>
            </netui:form>

The <netui:fileUpload> tag must upload to a Form Bean field of type org.apache.struts.upload.FormFile.

When uploading binary data, it is often convenient to provide two fields in the Form Bean to contain the binary data. One field is of type org.apache.struts.upload.FormFile, which holds the uploaded data. The other field is of type byte[] (or char[]), which holds the data in a form that can be processed by Java code. For instance you can transform the byte[] in a BLOB for insertion into a database, or pass it to a Servlet for display in a web browser.

        <!--
    	When uploading binary data, it is convenient to have a field
    	for uploading the data (of data type FormFile) and a field for handling
    	the data in the page flow (of data type binary[]).
    	-->
        public static class UploadForm extends FormData
        {
            private org.apache.struts.upload.FormFile contentUp;
            private byte[] content;

            public FormFile getContentUp()
            {
                return contentUp;
            }

            public void setContentUp(FormFile theFile)
            {
                this.contentUp = theFile;
            }

            public byte[] getContent()
            {
                return content;
            }

            public void setContent(byte[] theFile)
            {
                this.content = theFile;
            }
        }

The following action method shows how to transform the uploaded org.apache.struts.upload.FormFile field into a byte[] on submission. Note that the Form Bean field contentUp holds the org.apache.struts.upload.FormFile data, while the content field holds the byte[] data.

        /**
         * @jpf:action
         * @jpf:forward name="show" path="showImage.jsp"
         */
        public Forward upLoadFile(UploadForm form)
            throws Exception
        {
            /*
             * The following stanza loads the uploaded binary data into a byte Array.
             */
            // Make a byte Array big enough to fit the binary file.
            byte[] byteArr = new byte[filesize];
            //Create an input stream to read the uploaded file.
            ByteArrayInputStream bytein = new ByteArrayInputStream(form.contentUp.getFileData());
            // Load the input stream into the byte Array.
            bytein.read(byteArr);
            // Close the input stream.
            bytein.close();
            // Load the byte[] into the content field.
            form.setContent(byteArr);

            // In a real world example, you might do something with the binary data
            // such as transform it, or save it in a database.

            return new Forward("show",form);
        }

### Getting Binary Data from a Database

Binary data typically is stored as a BLOB or CLOB data type in a database, but it is processed by Java code in the form of a byte Array or char Array. BLOB and CLOB data can be retrieved from the data using a database control method such as the following.

        /**
         * @jc:sql
         * statement::
         * SELECT CONTENT FROM WEBLOGIC.DOCUMENT_CONTENT WHERE ID = {x}
         * ::
         */
        public java.sql.Blob getPHOTO(int x)
            throws SQLException;

The java.sql.BLOB data can be loaded into a byte Array for further processing, or, if it is an image, for display.

        byte[] byteArr = blob.getBytes(1, (int) blob.length());

## Displaying Binary Data

Once you have an image stored in a byte Array, you can display the image using a Java Servlet. The Servlet below works by reading the binary data (in the form of a byte[]) from the request object and writing the byte[] to the response object. The most important part of this Servlet is the method call response.setContentType("image/gif") which sets the MIME type to an image type.

    /*
     * This servlet reads image data (in the form of a byte[]) from the request object.
     * It outputs the byte[] as a visible image.
     */
    public class ShowImageServlet extends HttpServlet
    {
        protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
        {
            byte[] rgb = (byte[]) request.getAttribute("byArr");
            if (rgb != null)
            {
                response.setContentType("image/gif");
                OutputStream stream = response.getOutputStream();
                stream.write(rgb);
            }
            else
            {
                response.setContentType("text");
                response.getWriter().write("attribute byArr not found");
            }
        }
    }

Once you have named and mapped this Servlet in the WEB-INF/weblogic.xml file, you can call it from a variety of different sources. Assuming that the Servlet above is named ShowImageServlet.java, the following naming and mapping elements in WEB-INF/weblogic.xml allow you to access the Servlet by the URL pattern showImage.

        <servlet>
            <servlet-name>showImage</servlet-name>
            <servlet-class>servlets.ShowImageServlet</servlet-class>
        </servlet>

        <servlet-mapping>
            <servlet-name>showImage</servlet-name>
            <url-pattern>showImage</url-pattern>
        </servlet-mapping>

To display the binary image data on a JSP page, you pass the byte[] to the request object and then call the Servlet with a <jsp:forward> tag.

        <% request.setAttribute("byArr", rgb); %>
        <!--
        The image data is now on the request object.
        Forward the user to the showImage servlet.
        That servlet will process and display the image data contained on the request object.
        -->
        <jsp:forward page="/showImage" />

Related Topics

Handling Binary Data Sample