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.
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:
- // store the record ID in a variable
- recID = input.ID;
- // convert base64 string into image
- imageValue = zoho.encryption.base64DecodeToFile(input.Base64_text,"sample_file.png");
- // use creator api to upload the converted image to image field
- imageValue.setParamName("file");
- invokeSyntax = invokeurl
- [
- url :"https://creator.zoho.com/api/v2/<app_owner_name>/<app_name>/report/<report_link_name>/" + recID + "/Image/upload"
- type :POST
- files:imageValue
- connection:"creator"
- ];
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:
- 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.
Related Links
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Having Images as choices for a question
Requirement A form containing questions must have multiple choices in image format as answers for each question. Use Case A brain-teaser application is built that has a Questions form, which lists all kinds of questions. A question has multiple ...How to preview images from the sub-form entries
If you have an image field in your application, the uploaded image can be previewed instantly in a pop-up. This allows users to verify their uploads quickly and ensures that they have selected the correct image before finalizing the submission. In ...Know your Creator account's base URL
Data privacy and protection laws today require that collected data must be stored in data centers that are physically located in the respective country or region. To facilitate compliance, Zoho has set up multiple data centers across different ...Functionality based URLs
Overview In the topic Zoho Creator URL Patterns we learned about the default URLs to access a Zoho Creator application and its forms, reports and pages. In this topic, we will learn about the functionality based URLs to set default values for form ...Understand fields
Note: Ensure to not enter sensitive terms while naming your form fields or collect confidential information in them. A field is the basic unit or building block of a form. In your Zoho Creator app, you collect and store data using forms and each ...
New to Zoho LandingPage?
Zoho LandingPage Resources