DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Building a Google Cloud Storage (GCS) file explorer app in 30 minutes
Shubhendra Singh Chauhan for ToolJet

Posted on • Originally published at blog.tooljet.com

Building a Google Cloud Storage (GCS) file explorer app in 30 minutes

In this tutorial, we will build an internal tool for reading, downloading and uploading files to the buckets in Google Cloud Storage.

What is Google Cloud Storage?

Google Cloud Storage (GCS) is the global, secure, and scalable object storage for immutable data such as images, texts, videos, or any other file format. Objects are stored in buckets that are associated with a project, which are grouped under an organization.

What you'll need to build the GCS file explorer?

  • ToolJet (https://github.com/ToolJet/ToolJet): A free and open-source low-code platform that allows you to quickly build applications. You can create a free account on ToolJet Cloud or run it on your local machine.
  • Google Cloud Storage (GCS): JSON private key for the service account required for connecting ToolJet to GCS

Bonus: Download the exported application from here and import it to your ToolJet account to use it straight away.

Here's a glimpse of the application:

app

Without further ado, let's start building the application.


Building the UI of GCS file explorer

Let's start with building the UI for Explorer. Login to the ToolJet and then on the Dashboard, click on the Create new application button to create a new app. Once the app is created, you will be redirected to the visual app editor. You can change the name of the app by editing the default name i.e Untitled app from the top left of the app builder.

new_app

Visual app editor has 4 sections:

  • Canvas at the center, where you'll drag and drop widgets to build UI.
  • Query editor at the bottom, where you can create queries.
  • On the right sidebar, you'll find Widget Manager that has a list of built-in widgets and components. You can drag and drop to start building out user interface.
  • On the left sidebar, you'll see the Inspector, debugger, comments, settings, and Datasource manager. Datasource manager is used to add a new datasource or manage the connected datasource.

Let's build the UI

For building the user interface, you’ll need to drag and drop the following components from the Widget Manager(right sidebar) and place them accordingly.

Here is the configuration of widgets that I used for building the UI:

  • A Container as header and Text widget inside the container to give a title to the app i.e GCS File Explorer

header

  • Another container below the header that will contain all the sections of the application. Give this container a background color of your choice from the Styles.

container

  • Let's add a text widget in the center and set the text to Please select a bucket - we will display this text by conditionally disabling the visibility of the container that we will add on top of this text widget.

select

  • Let's drag a container on top of the text widget, and put list view widget inside the container. You can also use text widgets to set columns names- Name, Updated on, Size, and Actions.

drag

  • In the List view widget, use text widget for name, updated on, and size. Use Image widget for the Action. User will click on the download image to download the object from the GCS.

list

  • Set the following field value for the three text widgets Name, Updated on, and Size as {{listItem.name}}, {{moment(listItem).format("DD/MM/YYYY h:mm:ss a")}}, and {{(listItem.size/1024).toFixed(2)}} kb respectively. In the image widget set the loading state value to {{listItem.id === variables.currentlyLoadingId}} , and add the event handler to open the webpage {{queries.urlfordownload.data.url}}

event

  • Drag a button on the right side of the container that will be used to trigger the dialog for choosing the bucket.

button

  • Drag a modal somewhere below the container, go to the button properties and set the event handler to show the modal that you have added.

modal

  • Click on the button to show the modal, and then you can drag and drop dropdown and button widget inside the modal to build the modal UI. The dropdown will include the list of buckets that we will retrieve from the query, and the button will have an event handler to fire the query for listing the files from the selected bucket.

dropdown

  • Let's add text widget next to button for showing up the currently selected bucket. Set the text value as {{components.dropdown1.value}}

text

  • Now, the last section of the UI - the upload section. We will build this section inside a container. We will be using text, divider, text input, file picker and button widget to build the section. The button widget will include an event handler for firing up the upload query that we will create later.

upload

💡 Check the documentation to learn more about customising the widgets and beautifying the UI. ✨

Now, we are done building the UI - let's move forward with connecting the Google Cloud Storage and build the queries.


Connecting the GCS datasource and creating queries

Before creating the queries let's connect the GCS datasource first:

  • Go to the datasource manager on the left sidebar and click on + button to add a new datasource.
  • Search and click on Google Cloud Storage.
  • Enter and save the JSON private key for the service account
  • You can click on Test connection button to check the connection and then click on Save button to save the datasource.
  • Now, we are good to go for creating queries.

save

For this application, we will need to build the queries for:

  • JavaScript code for triggering show modal action
  • Listing the buckets from GCS
  • Listing the object/files from the selected bucket
  • Uploading the file to the selected bucket
  • Creating signed URL for downloading the file from the bucket

JavaScript code for triggering show modal action

  • Go to the Query Panel, and click on the + button Create a new JavaScript code query and enter the following code for triggering the show modal action:
actions.showModal('modal1')
Enter fullscreen mode Exit fullscreen mode

js

  • Go to the Advanced tab, toggle on the Run query on page load? option, and save the query as showModalOnPageLoad. Enabling Run query on page load option will display the modal every time the app is loaded - giving users the flexibility to choose the bucket before moving to other app functions.

Listing the buckets from GCS

  • Go to the Query Panel, and click on the + button to create a new query
  • Select Google Cloud Storage as the datasource
  • In the operations dropdown, select the List buckets option

listbuckets

  • Go to the Advanced tab, toggle on the Run query on page load? option, and click Save and Run button.
  • Let's open up the modal by clicking on the change button, and then edit the properties of the dropdown inside the modal. Set the Option Values and Option Label as {{queries.listBuckets.data.buckets}} , Default value to {{queries.listBuckets.data.buckets[0]}}, and Options loading state to {{queries.listBuckets.isLoading}}

option

Listing the object/files from the selected bucket

  • Go to the Query Panel, and click on the + button to create a new query
  • Select Google Cloud Storage as the datasource
  • In the operations dropdown, select the List files in a bucket option
  • In Bucket field, use JS to dynamically get the value from the selected option in the dropdown widget - {{components.dropdown1.value}}

listfiles

  • Now, go to Advanced tab and add an event handler to close the modal once the query is successful.
  • Save and run the query as listFiles

save

  • Let's open up the modal by clicking on the change button, and then edit the properties of the button that is inside the modal. Add an event handler for running the listFiles query for On Click event.

onclick

  • Go to the list view widget and connect the data returned by the query. Set list data field value to {{queries.listFiles.data.files}}

Uploading the file to the selected bucket

  • Go to the Query Panel, and click on the + button to create a new query
  • Select Google Cloud Storage as the datasource
  • In the operations dropdown, select the Upload file option
  • In the Bucket field enter {{components.dropdown1.value}} , File name field enter {{components.textinput1.value}} , Content type field enter {{components.filepicker1.file[0].type}} , Upload data field enter {{components.filepicker1.file[0].content}} , and set Encoding to utf8

encoding

  • Go to Advanced tab and add the two event handlers, one to run the listFiles query for On Success event. This will reload the list of files in the listview widget.

query1

  • And the other event handler to set component specific action for file picker that will clear the file from the widget once the query is successful.

claer

  • Save and run the query as upload.

Creating signed URL for downloading the file from the bucket

  • Go to the Query Panel, and click on the + button to create a new query
  • Select Google Cloud Storage as the datasource
  • In the operations dropdown, select the Signed URL for download option
  • In the Bucket field enter {{components.dropdown1.value}}, and in File name field enter {{queries.listFiles.data.files[components.listview2.selectedRowId].name}}

file

  • Go to the Advanced tab and set an event handler to unset a variable - currentlyLoadingId

set

  • Save the query as urlfordownload
  • Go to the list view widget and click on its handle to edit its properties.
  • Add the two event handlers- one to set a variable currentlyLoadingId for On row click event and set its value to {{queries.listFiles.data.files[components.listview2.selectedRowId].id}}
  • And the other handler to run the urlfordownload query.
  • Now you can click one on row on the list view widget and it will fire up the urlfordownload query.

Awesome! We have successfully built all the queries and connected with the UI.


And now FINALLY just Release your application from the top right corner of the app editor.

You have successfully created a File explorer app for your Google Cloud Storage. 🎉


If you have any queries related to building applications with ToolJet or just want to hangout in the community of low-code application developers the just drop us a Hi in our Slack Community. 🚀

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.