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.

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. 

    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 CRM Training
      Redefine the way you work
      with Zoho Workplace

        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 CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION










                                    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.




                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series


                                          • Digest


                                          • Functions


                                          • Meetups


                                          • Kbase


                                          • Resources


                                          • Glossary


                                          • Desk Marketplace


                                          • MVP Corner


                                          • Word of the Day


                                            Zoho Marketing Automation

                                              Zoho Sheet Resources

                                               

                                                  Zoho Forms Resources


                                                    Secure your business
                                                    communication with Zoho Mail


                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times


                                                      Carry your calendar with you
                                                      Anytime, anywhere




                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now




                                                                      Zoho TeamInbox Resources



                                                                              Zoho DataPrep Resources



                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW


                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now









                                                                                                      • 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 ...
                                                                                                      • Dynamically Display Images in Pages

                                                                                                        Requirement Dynamically display an image stored in the form in the Zoho Creator page. Use Case Imagine a Zoho Creator task management application employed to oversee tasks within an organization. Within the Dashboard page of this application, ...
                                                                                                      • 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 ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                          eBooks

                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                          Webinars

                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.



                                                                                                            Zoho Show Resources