Adding file upload support

This section describes how to enable a IBM® WebSphere® Multichannel Bank Transformation Toolkit application to support AJAX file upload requests.

Procedure

To enable a WebSphere Multichannel Bank Transformation Toolkit application to support AJAX file upload requests, do the following steps:

  1. Copy the SampleFileHandler file from the WebSphere Multichannel Bank Transformation Toolkit file upload sample project, and then paste it under the com.ibm.btt.sample package. Notes® that developer can create their own handler and make sure the data and handler configuration align with the handler.
    Note: Compiling errors might occur. To resolve the errors, copy the commons-fileupload-1.2.2.jar and the commons-io-1.4.jar files from the /WebContent/lib folder of the sample file upload project, and then paste the JAR files to the /WebContent/lib folder of your current project. Add the JAR files to the build path.
  2. In the btt.xml file, configure the file upload handler. Figure 1 is an example configuration of a file upload handler in the btt.xml file. For more information on the file upload handler, refer to the File upload handler topic.
    Figure 1. Example of a file upload handler configuration in the btt.xml file.
    <kCollid="ajax"description="html channel settings">
    	<fieldid="encoding"value="UTF-8"/>
    	<fieldid="cookies"value="true"/>
    	<fieldid="runInSession"value="true"/>
    	<fieldid="requestHandler"	value="com.ibm.btt.cs.ajax.AjaxHtmlRequestHandler"/>
    	<fieldid="presentationHandler"	value="com.ibm.btt.cs.ajax.AjaxHtmlPresentationHandler"/>
    	<kCollid="fileHandlers">
    		<kCollid="sampleFileHandler">
    			<fieldid="implClass"value="com.ibm.btt.sample.SampleFileHandler"/>
    			<fieldid="timeout"value="2000"/>
    			<fieldid="maxSize"value="62914560"/>
    			<fieldid="cachePath"value="c:\temp\fileupload\cache"/>
    			<fieldid="filepath"value="c:\temp\fileupload\upload"/>		
    			<fieldid="memCacheSize"value="4096"/>
    		</kColl>
    	</kColl>
    </kColl>
  3. Add the code in Figure 2 to the sampleFlow.xml file to define the file upload data. By defining the file upload data, the data is added to the processor context, which enables other operations to retrieve the file when the file upload request has been completed. Note that in Figure 2, the ID of the file upload data is userImgs.
    Figure 2. File upload data definition.
    <contextid="sampleFlowCtx"type="op"parent="sessionCtx">
    		<refKCollrefId="sampleFlowData"/>
    	</context>
    	<kCollid="sampleFlowData"dynamic="true">
    		<fieldid="accountNumber"value="955812345678n9uw88"/>
    		<fieldid="token"/>
    		<refKCollrefId="userImgs"/>
    </kColl>
    <!-- data for file uplaod -->
    	<!-- a file info with name 'file' is mandatory, fileId field is mandatory 
    	developers can add more other file info here -->
    	<kColl id="file">
    		<field id="name" />
    		<field id="size" />
    		<field id="fileId" />
    	</kColl>
    	<kColl id="userImgs">
    		<!-- latest upload file, this item is mandatory -->
    		<refDatarefId="file" />
    		<!-- if there are more than one files uploaded, the other uploaded files 
    		info will be added into the receivedFiles area -->
    		<iColl id="receivedFiles">
    			<refDatarefId="file" />
    		</iColl>
    		<!-- file handler that will operate the file uplaoding, this one is mandatory -->
    		<field id="handler" value="sampleFileHandler" />
    	</kColl>
    </kColl>
  4. Open the testAjax.xui file, and then drag a FileUpload widget from the Palette to the XUI editor space.
    Drag a FileUpload widget from the Palette to the XUI editor space.
  5. Click the FileUpload widget that is in the XUI editor space. The properties of the FileUpload widget displays in the Properties tab. If the Properties tab is not displayed, click Window > Shows View > Properties to open the Properties tab.
  6. In the Properties tab of the FileUpload view, click in the Value column of the dataName property, and then enter userImgs.
    Enter userImgs in the Value column of the dataName property.
  7. Generate a JSP page.
    1. In the Enterprise Explorer pane, right-click the XUI file that contains the FileUpload widget.
    2. Click XUI Editor > Generate Dojo Page.
  8. Add the definition of the file upload servlet in Figure 3 to the web.xml file.
    Figure 3. File upload servlet definition.
    <servlet>
    		<display-name>FileUploadServlet</display-name>
    		<servlet-name>FileUploadServlet</servlet-name>
    		<servlet-class>com.ibm.btt.cs.ajax.FileUploadServlet</servlet-class>
    		<init-param>
    			<!-- request timeout check duration, in milli-seconds, 
    				default value is 20*60*1000 -->
    			<param-name>checkDuration</param-name>
    			<param-value>2000</param-value>
    		</init-param>
    </servlet>
    <servlet-mapping>
    		<servlet-name>FileUploadServlet</servlet-name>
    		<url-pattern>/FileUploadServlet</url-pattern>
    </servlet-mapping>
  9. Deploy and run the applicatoin.
    1. In a browser, enter http://localhost:8080/TestAjax/EstablishSession to deploy and run the application. The sample XUI page displays.
    2. Click Browse to select a file to upload.
      Click Browse to select a file to upload.