Handling Images in Kaizala Part I

In this series of posts, we will discuss the different ways in which images can be handled in Kaizala. Here, we will talk about image upload and viewing in Kaizala. Later we will discuss workflows that can be built on top of Kaizala to push image data to SharePoint as well as to databases using middle-ware like Flow, web-hooks and Azure Functions.

Scenario

Images are one of the very powerful controls in the context of Kaizala forms. Image uploads are often mandatory in verification forms or in attendance scenarios. So, in this post, we will talk about how an image can be uploaded in a Kaizala form.

KASClient API to upload an image

KASClient provides us the showAttachmentPickerAsync API to invoke the platform’s attachment picker. It accepts 3 parameters.

The first parameter is an array of attachment types permitted to be uploaded. Different KASAttachmentType includes Image, Audio, Video or Document. Here, we pass only the Image type as we want the user to upload only images.

The second parameter is a JSON object which sets up the configuration of the attachment picker. It can be sent as null for the default experience but modified as follows if a more customised experience is required. There are 2 keys – image source (is) and maximum image count (mic):

{“is”: 1 or 2} – Launches Camera

{“is”: 3} – Launches Gallery

Default experience – Allows the user to choose between Camera/Gallery

{“mic”: x}: x is an integer which tells the maximum number of images that can be uploaded as attachment from the attachment-picker.

The third parameter is the callback function. The image paths come in the success callback in the form of an array and the developer can handle how he wants to render the images on the creation view. As a good practice, we also keep a cancel icon for every image and handle the scenario where a user might want to modify an image or remove an image altogether from the view.

Generate Base64 encoded version of uploaded image

Apart from local path of an uploaded image, we often want to create the base64 encoding of an image that we upload. KASClient provides the generateBase64ThumbnailAsync which accepts the local-path of the image and returns a base64 encoded version of the image in its callback. Its usage is shown in the below image:

Submitting an image as a response

For uploading a single image as an answer from a Kaizala form, the corresponding question in the app model should be of type Image and we submit the corresponding local path of the image to Kaizala. Note that, for multiple image uploads, we use AttachmentList type in AppModel and pass a serialised JSON object which is an array of local-paths of the images.

Note: AttachmentList has been discussed in this blog post along with other attachment types.

Fetching the image and showing it in Summary View

Once submitted, the user might want to see his own response in his chat-history. To enable that, the response-results view of the card (also called the summary view) should be able to fetch his response and render the image that he had uploaded.

The getFormAsync function gets the status of the form associated with the corresponding card. As shown below, it returns the KASForm in the success callback of the API.

Once the KASForm is received as a callback, the same is passed as a parameter to the getMyFormResponsesAsync API to get the user responses. It returns the array of responses(most recent first) for the particular user. The below image shows the response of the API as shown in the Inspect Console.

When the form responses are fetched, the image in the response is stored in the app’s local directory and the local-path is available in questionToAnswerMap as shown above.

This path can be used as a source to the div element where we want to render the image in summary view. As a good user experience, we also want the user to tap on the image and see the full image along with share options to other apps. For this, we create an event listener on click of the image div which will open the image in full screen. This is achieved by showImageImmersiveView which accepts an array of local-paths and the starting index of the image to be shown when the immersive view of the image array is launched.

Summary

In this post, we discussed how an image can be uploaded from Kaizala custom cards. In the next post of this series, we will talk about services which can be built on top of Kaizala to process the images uploaded and thereby integrate databases and SharePoint with Kaizala. You can find an action card with image upload scenarios here.