ShowTable of Contents
This article describes three samples that illustrate the use of the Worklight Camera builder that's provided with the Multichannel Feature Pack for Web Experience Factory 18.104.22.168. The three samples are:
– CameraTest: A simple test model for verifying your configuration for using hybrid camera support.
– CitizenReports: An application for reporting issues such as graffiti or potholes to a city government. This is based on an earlier sample and article posted on developerWorks.
– CheckDeposit: A simple example of an application that captures two pictures (front and back of a check).
To use these samples, you should refer to the article “Getting Started and Enabling Worklight Support” which describes how to configure your environment for using IBM Worklight in combination with Web Experience Factory and the Camera builder. To use the camera support you must be running in the context of an installed hybrid app built with IBM Worklight, and that article describes all the steps involved in setting things up (there are quite a few). The final step in that article refers back to this sample and the CameraTest model. Once you have completed the configuration described in that article, you should import both of the archive files from the feature pack into your project, and you should import the attached sample archive.
The CameraTest and ClientCameraTest models are in the samples/fp80/camera_test folder. They are very simple models intended to verify the configuration requirements for using the Camera builder. The models have two simple pages, one where the Camera builder is used, and one that shows the uploaded picture after taking a picture.
Screenshots of the CameraTest application running on a smartphone device:
This application lets users report issues they encounter such as graffiti or sign damage, for instance on a city government web site. When running from an installed hybrid app, users can take a picture of the issue and submit the photo along with other information. The submitted information is stored in a database table.
The models are derived from the sample that accompanies this article on developerWorks: http://www.ibm.com/developerworks/mobile/library/mo-aim1301-worklight-portal-4/index.html
To create and populate the database table, open the CitizenReportsProvider model, then open the SQL Table Create builder and click Fetch Data Source Names. From the drop-down menu for SQL DataSource, select jdbc/CloudscapeForWEF. If this data source doesn't exist, it will offer to create it for you. Scroll down in the builder and click the Create Table button. This should create and populate the database table.
Screenshots of the CitizenReports application:
This is a very simple example of an application that lets the user take two pictures for the front and back of a check, such as you would see in a banking app for letting customers deposit checks. This application is intended just as an example of camera use, and it doesn't store the captured data at all.
Screenshots of the CheckDeposit application:
Running the samples
To use the Camera builder with these samples, you will need to have your development environment configured for using Worklight with Web Experience Factory, as described in the “Getting Started and Enabling Worklight Support” article mentioned above.
To use these samples in your project, import the attached zip file into your project using the Import WebSphere Portlet Factory Archive command.
Note on file upload and security
The default location in the WAR (under the WEB-INF folder) to which files are uploaded should be considered a temporary location. Uploaded files should not be stored long term in this location for several reasons, including but not limited to:
- The uploaded images cannot be displayed from a location within the WEB-INF folder.
- The WAR on disk may be deleted and replaced when the application is redeployed.
- A multinode cluster may have multiple copies of the WAR, but the file is only uploaded to one of these.
For security reasons, you should not configure the default file upload location to be a servable content area of the deployed application. Doing so could allow malicious content to be uploaded into a location which is accessible from a browser. To prevent this situation, a web application should define a default upload location that is within the WEB-INF folder. After verifying that the uploaded files are appropriate to the application (right file extension(s), appropriate content, etc.), the uploaded files should be moved to a more suitable destination.
The Camera builder facilitates this security behavior. It will produce a Designer warning if the upload location is outside the WEB-INF folder. Once an image is uploaded, the Camera builder validates that it has the expected file extension and that the image content is the expected type. If the validation succeeds, the image is moved to the specified folder location relative to the application root. If the validation fails, the image is deleted.