Creating a Single Image/File Upload Module in Retool: A Comprehensive Guide

Creating uploader module in Retool

Modules are reusable across apps, lightweight, and keep things focused – perfect for single-purpose tasks like this.

Create module

To create a module, on your home page, select Create new > Module and give it a unique name. Unlike apps, modules have a single container for components (no header, sidebar, etc.) as they'll be embedded within your app. This container spans the canvas width, but you can adjust it later.

Add components to the module

• Add a "Container" component into your module.
• Add a "Button" component next to the container title. Edit the button text to "Submit" to initiate the upload process.
• Within the container, add a "File Input" component. This will allow users to select the image they want to upload.
• If your app interacts with this module and might have a previously uploaded image, consider adding a "URL" component below the "FileInput" component. This provides an additional way for users to reference existing images.

Add inputs to the module

To enhance your image uploader's flexibility, let's leverage module‘s inputs. Imagine an e-commerce app where users upload product images. The module should display a dynamic container title ("Main Product Image" or "Secondary Image" based on category) and pre-fill the URL field with an existing image URL (if editing). Module’s inputs act like hidden settings within the module, receiving values from your app. These inputs come in two flavors: data inputs and query inputs. While we won't need query inputs for the image uploader, data inputs are essential. Here’s how to do it:

• Open the Module settings with the Inspector.
• Click the "+" next to "Inputs" and add two data inputs:‍

                Title: (Optional description) Set a default title.

‍                 Image URL: (Optional description) Link to an existing external image.

• Use {{ title.value }} and {{ imageUrl.value }} in the container title and URL fields. These values come from your app, so titles and URLs can adapt based on what your app provides.

Add ouputs to the module

While data inputs allow your image uploader to receive values from your app, outputs serve the opposite purpose. They let your module share data back with the app that uses it.

To add an output, open the Inspector and find the "Outputs" section. Click the "+" button and enter the desired value in the "Value" field.

Creating query to upload file/image to Google Cloud Storage

Now that your Retool UI is ready, let's tackle the final hurdle: building the query to upload file/image to Google Cloud Storage. Before you can interact with Google Cloud Storage from Retool, you'll need to establish a connection between the two platforms. This typically involves setting up service accounts and granting appropriate permissions. The provided blog post https://retoolers-io.webflow.io/blog-posts/how-to-connect-retool-with-google-cloud-and-manage-api-keys should guide you through this connection process.

Since you've already established a successful connection between Retool and Google Cloud Storage, let’s create a query uploadImage for uploading images with metadata:

async function uploadImage() {
  const mimeType = fileInput1.files[0].type;
  const extension = mimeType.split('/').pop();  
  localStorage.setValue("fileInput", `${uuid.v4()}.${extension}`);
  localStorage.setValue("fileExtension", mimeType);
  await uploadToGCS.trigger({
	  onSuccess: function(data) {
      url1.setValue(data?.signedUrl.split("?GoogleAccessId")[0]);
    },
    onFailure: function(error) {
      utils.showNotification("Error", error, "error", "3s");
    } 
  });
  await setMetadata.trigger();
}

await uploadImage();

This query will handle:

• Retrieving file information (MIME type, extension).
• Uploading the image to Google Cloud Storage.
• Setting additional image metadata.

Now, let's delve deeper into the specifics of each step within the Retool query:

Retrieving file information

Grabs MIME type and extension from the selected file, store a unique filename for uploading by using Retool's built-in functions uuid.v4().

Uploading the image to Google Cloud Storage

Let's build the upload functionality using GUI:

If uploading successfully, setting value of URL component to data, otherwise showing error notification.

Setting additional image metadata.

Enhance your upload functionality by including metadata for the uploaded files/images:

• Cache-Control: This header instructs web browsers and caching servers to cache the uploaded image publicly for one year (31536000 seconds). This can improve website performance by reducing the need to re-download the image for subsequent user visits within a year.

• Content-Type: This header specifies the MIME type (e.g., image/jpeg, image/png) of the uploaded file.This ensures browsers can correctly display the uploaded image.

Finally, create Click event handler uploadImage.trigger() in “Button” component.

Testing uploader module

Now, let's test the module's functionality by creating an app in Retool using this module and uploading a PDF file.

If uploading successfully, the module will display the URL of the uploaded file within Google Cloud Storage. This URL allows anyone with the link to access the uploaded PDF.

Congratulation! You have successfully created a single image/file uploader module in Retool. Now you can embed this module within any Retool app to enhance its functionality.

Get in Touch

Ready to bring your dashboard vision to life? Contact Retoolers today, and let us help you create a powerful, intuitive dashboard that meets your exact requirements.