Convert Base64 string to images | Zoho Creator Academy

Convert Base64 string to images

Requirement

Store Base64 strings and their automatically converted corresponding images.

Use Case

A marketing team uses base64 strings to render images on their webpage instead of direct image files to reduce the webpage load time. So they store base64 strings in an app for their reference which are converted to images and stored in an image field in the report.

See how it works

Steps to follow

1. Create a form named Images with the following details:

Field Type
Field Name
Field Link Name
Multi Line
Base64 text
Base64_text
Image
Image
Image

Now let's create a connection that will be used later in this tutorial

2. Navigate to Microservices and click + Create New -> Connections to create a new connection. 

3. Select Zoho OAuth.


4. Select the required scopes for Creator, fill in other details, and click Create and Authorize.
  

Ensure that the connection is enabled for this app

5. Create a workflow with the following details.


6. Now let's write a script to convert the base64 string into an image and upload it to Image field. Click Add New Action > Deluge Script and save the following script in the Deluge editor:
  1. // store the record ID in a variable
  2. recID = input.ID;
  3. // convert base64 string into image
  4. imageValue = zoho.encryption.base64DecodeToFile(input.Base64_text,"sample_file.png");
  5. // use creator api to upload the converted image to image field
  6. imageValue.setParamName("file");
  7. invokeSyntax = invokeurl
  8. [
  9. url :"https://creator.zoho.com/api/v2/<app_owner_name>/<app_name>/report/<report_link_name>/" + recID + "/Image/upload"
  10. type :POST
  11. files:imageValue
  12. connection:"creator"
  13. ];
7. You can also hide the Image field when the form loads since it is not filled by users manually. Create a workflow with the following details:


8. Click Add New Action and save the following script:
  1. hide Image;

See how it works


Sample data

You can download the attached files at the end of this page that each contain an encoded base64 string for a sample image and upload it in your image field. The relevant image will be rendered in your report. 
Tip: You can use this website to simply drag and drop, upload, or provide an image URL in the space provided and the encoder will quickly generate a Base64 encoded version of that image. 
  1. Base 64 Decode To File task
  2. Deluge
  3. Image field