Skip to main content

Upload And View Images Using Base64 String

This guide shows how to upload and view images using the base64 string format in your ToolJet application.

1. Create a New Table In ToolJet Database​

  • Create a new table named test_db.

  • The id field will be present by default to create a unique identifier for each record in our database table.

  • Click on Add more columns button and add this column: image and select varchar as datatype.

While we are using the ToolJet Database for this guide; feel free to use other databases while applying the same principles.

Create New Table in TJDB

2. Upload File To The Database​

  • Create a new application and name it Upload Images Example.

  • Drag and drop a Filepicker component on the canvas from the components library on the right.

  • Rename the filepicker component to image_picker.

  • Retain the default {{"image/*"}} or select file type as "Image files" setting for the Accept file types property in the image_picker component, as it's intended for image uploads.

  • Click on the image_picker component and select an image to upload.

  • After uploading, you will see the filename displayed on the filepicker component.

Uploaded Files using a filepicker

  • Click on the + Add button in the query panel to create a new query, choose ToolJet Database as the data source, select test_db as Table name, and Create Row as Operations. Name this query upload_files.

  • Under the Columns section, add this column image and set the value given below :

{{components.image_picker.file[0].base64Data}}

In the above query, we are using the exposed variables of the filepicker component to get the base64 string of the file we had uploaded earlier.

Add Files Query

  • Add a Button component below the filepicker and rename it to upload.

  • Set the Button's text to Upload and create a New event handler with the following settings: Event - On click, Action - Run Query and Query - upload_files.

  • Now, Click on the Upload button to upload the files that we had selected in the Filepicker component earlier.

Upload Button Properties

The upload process is now complete. Whenever a file is selected in the Filepicker component and the upload button is clicked, the base64 string of the file will be automatically written to the database.

3. View Image File​

  • Create a query named get_files to retrieve base64 strings from test_db : Click on + Add button in the query panel, select ToolJet as Database, test_db as Table name, and List rows as Operations.

  • Enable Run this query on application load from settings.

Fetch Files Query

  • Drag an Image component onto the canvas from the components library. Rename the Image component to display_image.

  • In the URL property of the display_image component, enter the following:

{{'data:image;base64,' + queries.get_files.data[0].image}}

The provided code constructs a Data URL to display the base64-encoded data as an image.

Final Preview