This section describes how to enable a UNICOM® Digital Transformation Toolkit (UDTT™) application to support AJAX file upload requests.
To enable a UDTT application to support AJAX file upload requests
1 Copy the SampleFileHandler file from the UDTT 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/libfolder 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. Below is an example configuration of a file upload handler in the btt.xml file. For more information on the file upload handler, see File upload handler.
Example of a file upload handler configuration in the btt.xml file.
3 Add the code shown below 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. In the example below, the ID of the file upload data is userImgs.
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.
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.
7 Generate a JSP page.
▪ In the Enterprise Explorer pane, right-click the XUI file that contains the FileUpload widget.
▪ Click XUI Editor > Generate Dojo Page.
8 Add the definition of the file upload servlet in the example below to the web.xml file.
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.
▪ In a browser, enter http://localhost:8080/TestAjax/EstablishSession to deploy and run the application.
