How to Create a Web-based File Browser with ngrok Plugin?

Creating a web-based file browser for directly downloading and uploading files to edge devices is a convenient way for operators to manage files remotely. In this article, we will demonstrate how to use the ngrok plugin and an open-source project, File Browser, to create a web-based file browser.

File Browser Introduction

File Browser provides an interface for managing files, including uploading, deleting, previewing, renaming, and editing. To start using File Browser, we need to install it on the device. We will use the Send Command feature on the device's Monitoring page to complete the installation steps. For more detailed installation instructions, refer to the File Browser online document. Now, let's navigate to the Send Command page.

Install File Browser

1. Enter the following command in Send Command to download File Browser:
   

   curl -fsSL https://raw.githubusercontent.com/filebrowser/get/master/get.sh | bash

2. Enter the following command in Send Command to change the directory and initialize a database in that directory. You can initialize the File Browser database wherever you like. In this example, we use the home directory:
   

   cd ~/ && /usr/local/bin/filebrowser config init

   Note: Remember the location where you store the File Browser database (filebrowser.db). You will need this information to create a new access (see the next step).

3. Enter the following command in Send Command to set your first user. Specify the directory where the File Browser database is stored. Following the previous step, we use the home directory to store the database:
   

   /usr/local/bin/filebrowser -d ~/filebrowser.db users add <username> <password>

Access a Directory with File Browser

Enter the following command in Send Command to use File Browser to access a specific directory. Specify the directory you want to access after the -r parameter.

/usr/local/bin/filebrowser -d ~/filebrowser.db -r <directory> > /dev/null 2>&1 &

ngrok Plugin

After File Browser is successfully installed and started on the device, we can use the ngrok plugin to redirect the locally running File Browser service to the internet via ngrok's tunneling service. Let's navigate to the ngrok plugin page.

Open a Tunnel for File Browser Service

1. The File Browser service runs on localhost with port number 8080 by default. Expand the Open tunnel section inside the Commands card, select Endpoints with HTTP, and specify the Port as 8080.
   
2. Click on the Execute button.
3. Open the link that appears in the Stats card to access the directory.
   

Close the Tunnel

1. Copy and paste the File Browser link into Close tunnel.
   
2. Click on the Execute button.

You're All Set!

back to top