Say Cheese! Take Photo action improvements in Visual Builder 19.1.3 release

Take Photo is a very useful action, especially on Mobile, as it provides access to the device camera. Take Photo is used to capture images, like personal photographs, as well as other uses, like scanning QR or bar codes. Depending on your use, you may need to just access the image on device or you may need to send it to another service, like a storage service. 

Previous to the 19.1.3 release, Take Photo returned a file patch to the image on the local device. This path could easily be assigned directly to a JET image or avatar component in the next step of the action chain. However, if you needed to send it to a storage service, some preprocessing needed to be done on device to prepare it for delivery. 

Vijaykumar Yenen has written an excellent article that details this previous behavior. It shows some of the custom code needed to prepare the image for upload to a service. Each storage service has different requirements for uploading images but generally you need to create a Base64 encoded string to send to the service.

In some cases, the storage service has a POST operation that requires a pointer to the file. In those case, tools like Postman would provide a filepicker to select the file, and now in 19.1.3, Take Photo provides similar functionality by default. This behavior is seen in the new Media Type property in the Take Photo action, if set (by default) to "image."

However, what is you want the old behavior, i.e. assigning the file location to a JET image or avatar component. Well, there are a a couple of options. The easiest is to  remove "image" from the Media Type property and set it to nothing. In that case, the Take Photo action reverts to returning the file path. You can also write some custom code to convert the Blob stream to a URL which you can set to the src property of the image component. See the code sample below:

  PageModule.prototype.showPic = function(fileBlob) {
    const blobURL = URL.createObjectURL(fileBlob);

    // Release the BLOB after it loads.
    document.getElementById("mypic").onload = function() {
      URL.revokeObjectURL(blobURL);
    };

    return blobURL;
  }