Send Smartphone Images to IBM i with Valence? Not a Problem!

Just about every employee has access to a smartphone or wifi-enabled tablet with a built-in camera these days.  The ubiquity of these image-taking devices — coupled with HTML5 methods that allow access to the photos — presents a unique opportunity for IBM i developers to create apps that can pull in images and store them on the IFS.  So whether you’re looking to incorporate a photo of a shipment to show proof of packing, store a picture of a damaged item for an insurance claim/RMA, or simply add an employee image to your personnel master, Valence Framework makes it possible.  And the latest Valence update (version 4.0.20140725.0) contains new procedures and an example app to show you just how to do it! the employee pics demo app, which appears in the examples section of the valence portal launch pad once you’ve applied the new update, is actually a mobile app that is configured to show in both the desktop and mobile portals. 

However, because it is sencha touch-based, you must be using a webkit-enabled browser (such as chrome or safari) in order to launch it when using the desktop portal.  this very simple app is intended to serve as a proof-of-concept for creating your own apps in which users can upload pertinent images to the ifs.  the path to these image files can then be stored as a field in a physical file record and used to show the images in other apps as needed.  or you can use a naming convention for your images that corresponds to an existing field in a physical file. 

To illustrate this concept, the employee pics app’s images are stored in the ifs using the employee number to which they’re associated (field empno in file demoemast).  so the image (a .png file) corresponding to employee number 4, for example, is stored with a name of 4.png.  the path we’re using to store all the images for this particular app is /valence-4.0/mobile/examples/architect/EmployeePics/resources/images/employees/.

Here’s how the process works:

(1) Images are converted by the front-end app to base64 data, then sent to the back-end as a long string using a standard Ajax call.

(2) The base64 data is then converted back to binary and saved to the IFS using a new RPG toolkit procedure, added as part of this latest build, called vvIn_base64tofile().

(3) The image is then subsequently displayed in the app by referencing its url path on the IFS. Employee Pics is of course a very simple app, intended merely to show how images, whether they be on your smartphone or your PC, can be uploaded through your browser to the IBM i and viewed.  The real fun starts when you incorporate the logic into your own apps!

Some of the CNX development staff modeling for the app
Some of the CNX development staff who unwittingly modeled for the demo app