Discuss

Listing Files From a Folder on Your Server

On this page

You can use a list of files as a data source on your page, so you can create dynamic lists and tables as well as dynamic slideshows and galleries without complicated database connections.

First, open the Server Connect panel and create a new server action:

Screenshot_1|690x380

We call it list_files:

Screenshot_2|690x380

Right click steps:

Screenshot_3|690x380

Open the File Management category and add Folder List:

Screenshot_4|690x380

Browse to the folder which content you'd like to list:

Screenshot_5|690x380

You can show just specific file types. If you want to do this, just enter a comma separated list of the file extensions you'd like to list, like: .jpg,.png.gif or leave the field empty to list all the files:

Screenshot_6|690x380

Select whether you want to calculate the folder size or not. Setup the option as you need it. We don't need the folder size for our page:

Screenshot_7|690x380

Select whether to include folders, located in the selected folder or not. Also select whether to show hidden files in the list, or not:

Screenshot_8|690x380

Save your server action and close the server connect panel:

Screenshot_9|690x380

On our page we added App Connect and Bootstrap 4 frameworks. Click the add new component button:

Screenshot_12|690x380

Open Data and add Server Connect:

Screenshot_13|690x380

Select a server action here:

Screenshot_14|690x380

This should be the server action, which we just created - list_files:

Screenshot_15|690x380

In our example we will show you how to use the files list as a source for dynamic table, but you can use it in a regular repeat/repeat children regions, masonry grid, slideshows, image galleries etc. We click the insert button on the page:

Screenshot_16|690x380

Open Generators and select Bootstrap 4 Table Generator:

Screenshot_17|690x380

Click the dynamic data picker, to select the data source:

Screenshot_18|690x380

Select the Folder List under data in your server action:

Screenshot_19|690x380

By default, it adds all the available options as table columns, but you can remove the ones you don't need:

Screenshot_20|690x380

We only need the Type, Name, Size and Data Created:

Screenshot_21|690x380

You can see the files, listed on the page:

Screenshot_22|690x380

Of course, you can format the data as you wish. For example - you can format the date. Click the date cell and click the dynamic data picker for the Inner Text attribute:

Screenshot_23|690x380

Click the formatter button:

Screenshot_24|690x380

And apply the Format Date option:

Screenshot_25|690x380

Enter the date format you need and click the select button:

Screenshot_26|690x380

Click Select to apply the changes in your table:

Screenshot_27|690x380

This way you can format any of the table values.

You are done! Your table is now listing the files from your folder:

Screenshot_28|690x380