Quick Guide: Build Image Converter Using ToolJet and JavaScript

We use the WebP format for images on our blog to boost SEO and speed up load times. Usually, a quick Google search leads to various generic tools to handle image conversion, but the idea of building our own tool using ToolJet sounded exciting. The goal was simple: handle image conversion, quality reduction, and file renaming all at once.

ToolJet’s support for JavaScript, Python, and custom React components made it the perfect candidate. Building the tool was straightforward and surprisingly quick. The speed and ease inspired us to share the process with others who might be considering creating similar applications using low-code platforms. Here’s how we did it, so you can too!

If you wish to follow along this guide, sign up for ToolJet’s free cloud account and begin by creating a new application named Image Converter.

The first step of the development process is to create a basic UI using ToolJet’s visual app-builder.

• Drag and drop a Container component from the components library on the right; rename it to header and adjust its size as shown in the reference image below.
• Click on the Container component to reveal the properties panel on the right with Properties and Styles tabs.
• In the Styles tab, change the Background color property by entering the hex code #152A65.
• Drag and drop an Image component on the left corner of the Container, rename it to logo and fill in the following URL in its URL property: https://app.tooljet.com/logo.svg
• Drag and drop a Text component on the right corner of the Container and name it headerText.
• Enter ToolJet Image Converter under the Text property of the Text component, and adjust its Font weight and Text size properties.

Naming the components comes in handy when we want to access the data related to them. It’s always a best practice to name components based on their functionality.

• Below the header, place a File Picker component and an Image component side by side. Rename the File Picker to fileUploader and the Image component to imagePreview.
• Adjust the Image component’s size so that the user can see a clear preview before downloading a converted image.
• For the Image component’s URL property, enter the following link:
  'https://blog.tooljet.com/wp-content/uploads/2024/01/ToolJet-Year-In-Review.webp'.
  For now, this will be the placeholder for the Image component.

The fileUploader (File Picker) component will be used to upload images while the imagePreview (Image) component will display the preview of the uploaded images.

• Add two Text components for File name and Quality labels.
• Besides the File name label, insert a Text Input component and rename it to newFileName.
• Next to the Quality label, place a Number Input component and rename it to qualitySetting.
• Set the Text Input’s Default value property to Converted File. This will set the default name of the file in case a custom name is not needed.
• For the Number Input component, adjust the Default value property to 0.8, Minimum value property to 0.1, and Maximum value property to 1.0.

We are using Dark Blue(#152A65) as the primary color for this app, adjust the color settings of the components accordingly.

• Under Quality, add a Radio Button component and rename it to selectFormat.
• Set the Radio Button’s Default value property to {{"jpeg"}}.
  For Options property, input {{["jpeg", "webp", "png"]}},
  and for Option labels property, {{["jpeg", "webp", "png"]}}.
• Add a Button component at the bottom, rename it to downloadButton, and change its Button text property to Download.

The UI is ready! Time to create a JavaScript Query that handles the image conversion process.

• Expand the Query Panel below. Click on + Add, choose Run JavaScript code, and rename the created query to convertAndDownload.
• Paste the following code into the code editor:

function convertImageUsingBase64(base64Data = components.fileUploader.file[0].base64Data, filename = components.newFileName.value, quality = components.qualitySetting.value, outputFormat = "image/"+components.selectFormat.value) {
    
    // Validate the output format
    const validFormats = ['image/png', 'image/jpeg', 'image/webp'];
    if (!validFormats.includes(outputFormat)) {
        console.error(`Invalid output format. Acceptable formats are: ${validFormats.join(', ')}`);
        return;
    }

    // Decode the base64 string to a Blob object
    const base64String = base64Data.split(';base64,').pop();
    const byteCharacters = atob(base64String);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], {type: outputFormat});
    const url = URL.createObjectURL(blob);

    // Create an Image object to load the blob URL
    const img = new Image();
    img.onload = function() {
        // Create a canvas with the same dimensions as the image
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        const ctx = canvas.getContext('2d');

        // Draw the image at its natural size
        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

        // Convert the canvas content to the specified format with quality
        const compressedDataURL = canvas.toDataURL(outputFormat, quality);

        // Create a temporary link to initiate the download
        const link = document.createElement('a');
        link.href = compressedDataURL;
        link.download = filename + '.' + outputFormat.split('/')[1]; // Append file extension based on format
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        // Clean up by revoking the blob URL to free memory
        URL.revokeObjectURL(url);
    };
    // Set the source of the image to the blob URL
    img.src = url;
}

convertImageUsingBase64();

This JavaScript snippet will:
1. Accept the base64 data of the uploaded image in the fileUploader (File Picker) component.
2. Use the name in the newFileName (Text Input) component to rename the image.
3. Adjust its quality based on the number we enter in the qualitySetting (Number Input) component.
4. Convert its format based on the choice we make on the selectFormat (Radio Button) component.

For more details on base64 and the above JavaScript function, refer to this Base64 Data article.

We have a JavaScript query that can handle the conversion process, time to bind it to the components.

• Select the Button component, navigate to Events in the properties panel, and click on + New event handler.
• Pick On click as the Event, Run Query the Action, and choose convertAndDownload as the Query(the query created in the previous step).

The above setting will ensure that the query we had created in the previous step runs every time we click on the button.

• Select the Image component and add this code to its URL property:
  {{'data:image;base64,' + components.fileUploader.file[0].base64Data}}

Now every time an image is uploaded in the fileUploader(File Picker) component, the imagePreview (Image) component will display it.

The core functionality of our image converter tool is now ready. You can test it by uploading an image, changing its file name, quality and format, and then downloading it using the download button.

• Under the Download component’s Styles tab, find the Disable property, click on fx, and input:
  {{!components.fileUploader.file[0]}}

This will disable the download button if no file is present in the fileUploader(File Picker) component.

• For the Image component’s URL property, replace the existing code with:
  {{components.fileUploader.file[0] ?
'data:image;base64,' + components.fileUploader.file[0].base64Data : 'https://blog.tooljet.com/wp-content/uploads/2024/01/ToolJet-Year-In-Review.webp'; }}

This will check if a file is present in the fileUploader(File Picker) component and display a placeholder image in case it is not present.

If you’ve followed this tutorial, your image converter is now complete and ready for deployment. To launch, simply click the Promote button in the top-left corner, move the application to the production environment, and release it to your audience. To continue building applications using ToolJet, check out our official documentation. You can also join us on slack for any doubts or queries.

Wondering what I should build next using ToolJet? A slack alternative? Or an AI Code Translator?