Navigating directories & cross platform support

Your application can navigate the user's file system by setting and updating a current directory. When a directory is selected using the File System - Set Current Directory action, the contents of that location are read and returned as a list of files and folders to the List Of Files In Current Directory state.

From there, your application can move through the directory structure using additional navigation actions. For example, you can use File System - Go Back A Directory action, which removes the last segment of the current path, or move forward a directory with the File System - Go To Next Directory action by appending a folder name to the current path.

These actions allow you to build custom file browsing interfaces, giving users the ability to explore folders, view files, and navigate through their filesystem directly within your application.

You may find yourself looking to build custom directory path - this is straight forward with one caveat; The file path separator is different depending on the OS

macOS / Linux separates file paths with /
While Windows separates file paths with \

You can manually handle this distinction yourself, or just join paths with the File System Separator state.

How To:

View this example in the Bubble editor:

https://bubble.io/page?id=deskifier-plugin-test&tab=Design&name=directory-nav-example&type=page&elements=bTQlg

While building a full file explorer can get a little complex, we'll focus on some basics to get started with.

First you'll need the Filesystem Element on your page.

Step 1.

Next, let's add some text, and a repeating group that will display our outputs.

If we preview our app now, we'll see that the repeating group and current directory are both empty.

Step 2.

Next we'll add a button we can click to set the initial directory.

Add a workflow with the File System - Set Current Directory action using the Desktop Folder Directory state as our directory input.

Now when we preview and click the button, we'll see an output.

Step 3.

Now, we have a list of files and directories. Let's add a button so that we can explore the directories further.

Add a workflow with the File System - Go To Next Directory action. We'll use the current cell's file name as the input. This takes our current directory, and appends the file name onto the end, and sets that as our new directory.

Now when we preview our app, clicking the button should show us the contents of that directory