In this tutorial, we will build an internal tool for reading, downloading and uploading objects to the buckets in MinIO.

What is MinIO?

Minio is an open-source distributed object storage server designed for Private Cloud infrastructure providing S3 storage functionality. Minio is can be used for storing unstructured data such as photos, videos, log files, backups, and containers.

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 onToolJet Cloud or run it on yourlocal machine.
• MinIO: Check out the various editions and theirPricing here. I have used the community edition using docker for this tutorial.

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

Here's a glimpse of the application:

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

Building the UI of the explorer

Let's start with building the UI for Explorer. Login to ToolJet and then on theDashboard, click on theCreate 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.eUntitled app from the top left of the app builder.

The visual app editor has 4 sections:

• Canvas is 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 findWidget Manager which has a list of built-in widgets and components. You can drag and drop to start building out the user interface.
• On the left sidebar, you'll see the Inspector, debugger, comments, settings, andDatasource manager. The 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:

• AContainer as header andText widget inside the container to give a title to the app i.eMinIO File Explorer

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

• Let's add atext widget in the center and set the text toPlease 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

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

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

• Set the following field value for the three text widgets Name, Updated on, and Size as{{listItem.name}},{{moment(listItem.lastModified).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}}

• Drag abutton on the right side of the container that will be used to trigger the dialog forchoosing the bucket.

• Drag amodal somewhere below the container, go to the button properties and set theevent handler toshow the modal that you have added.

• Click on the button to show the modal, and then you can drag and dropdropdown andbutton 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.

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

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

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

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

Connecting the MinIO datasource and creating queries

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

• Go to the datasource manager on the left sidebar and click on + button toadd a new datasource.
• Search and click onMinIO.
• Enter theHost, Port, Username and Password.
• You can click onTest connection button to check the connection and then click onSave button to save the datasource.
• Now, we are good to go for creating queries.

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

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

JavaScript code for triggering show modal action

• Go to the Query Panel, and click on the+ button
• Create a newJavaScript code query and enter the following code for triggering the show modal action:

actions.showModal('modal1')

• Go to theAdvanced tab, toggle on theRun query on page load? option, and save the query asshowModalOnPageLoad. Enabling the 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 MinIO

• Go to the Query Panel, and click on the+ button to create a new query
• SelectMinIO as the datasource
• In theoperations dropdown, select theList buckets option

• Go to theAdvanced tab, toggle on theRun query on page load? option, and clickSave and Run button.
• Let's open up the modal by clicking on thechange button, and then edit the properties of the dropdown inside the modal. Set theOption Values andOption Label as{{queries.listBuckets.data.map(row => row.name)}} , the Default value to{{queries.listBuckets.data.map(row => row.name)[0]}}, andOptions loading state to{{queries.listBuckets.isLoading}}

Listing the object/files from the selected bucket

• Go to theQuery Panel, and click on the+ button to create a new query
• SelectMinIO as thedatasource
• In theoperations dropdown, select theList objects in a bucket option
• In theBucket field, use JS to dynamically get the value from the selected option in the dropdown widget -{{components.dropdown1.value}}

• Now, go to theAdvanced tab and add anevent handler toclose the modal once thequery is successful.
• Save and run the query aslistFiles.

• Let's open up themodal by clicking on thechange button, and then edit the properties of the button that is inside the modal. Add anevent handler for running thelistFiles query forOn Click event.

• Go to thelist 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
• SelectMinIO as thedatasource
• In theoperations dropdown, select thePut object option
• In theBucket field enter{{components.dropdown1.value}} ,File name field enter{{components.textinput1.value}} ,Content type field enter{{components.filepicker1.file[0].type}} , andUpload data field enter{{components.filepicker1.file[0].content}}

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

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

• 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
• SelectMinIO as thedatasource
• In theoperations dropdown, select thePresigned URL for download option
• In theBucket field enter{{components.dropdown1.value}}, and inFile name field enter{{queries.listFiles.data.Body[components.listview2.selectedRowId].name}}

• Go to theAdvanced tab and set anevent handler tounset a variable -currentlyLoadingId

• Save the query asurlfordownload
• Go to thelist view widget and click on its handle toedit its properties.
• Add thetwo event handlers- one toset a variablecurrentlyLoadingId forOn row click event and set its value to{{queries.listFiles.data.Body[components.listview2.selectedRowId].name}}
• And the otherhandler to run theurlfordownload query.
• Now you can click on one of the 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 justRelease your application from the top right corner of the app editor.

You have successfully created aFile explorer app for your MinIO object storage 🎉

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