How to Show a List of Google Drive Files with Download Buttons

Do you want visitors to see a tidy list of your Google Drive files, then preview or download any of them with one click? You can easily do this with DriveHub.

The List module shows your files in a clean table with the file name, size and date, plus a preview and a download button on every row. It is super useful for proposals, price lists, forms or any documents you share again and again, because you update the files in Google Drive and the page follows.

Here is an easy, step-by-step guide to help you set it all up!

Step 1: Install DriveHub and Connect Google Drive #

First, make sure DriveHub is installed and your Google account is connected:

• From your WordPress admin, click on Plugins > Add New.
• Search for DriveHub.
• Click Install and then Activate.
• Follow the setup screen to add your Google account.

Read our step by step setup guide to avoid any confusion.

Step 2: Add a New Module #

Every list you show on your website is a module. Let’s create one:

• Go to DriveHub > Modules from your WP-Admin.
• Click on Add module at the top right.

Step 3: Choose the List Module #

A window opens with all the module types:

• Under Browse & Search, click on List.

The module editor opens on the Source step. Give your module a name you will recognise later:

• Click on the name at the top and type a new one (for example, Client Proposals List).

Step 4: Choose Your Files (Source Tab) #

In this step, you pick what visitors see in the list:

• Scroll down to Your Drive.
• Tick the folder you want to share (we’ll use Client Proposals). You can also tick single files instead of a whole folder.
• Check the Items Selected panel on the right. Everything you ticked shows up here, and you can remove an item with the x next to it.

Above Your Drive you will also see a few switches:

• All Folders & Files: shows every folder and file of your linked Google Drive accounts. Leave it off to share only what you ticked.
• Use Private Files and Use ACF field Files: take the files from each user’s private folder or from an ACF field instead. Leave them off for a normal list.
• Merge Selected Folder Files: shows the files from all the folders you picked together in one list. Turn on Include Subfolder Files to add the files inside their subfolders too.

Step 5: Choose File Rules (Filter Tab) #

Here, you can decide which files show up in the list. This tab is optional, and every rule here really changes what visitors see:

• Click on Filter in the left menu.
• Use Show Files and Show Folders to hide all files or all folders from the list.
• Allowed Extensions: to show only some file types, turn off Allow all, type a type (like pdf) and click Add. Repeat for each type you want. To hide just a few types instead, keep Allow all on and type them in Except (like zip).
• Allowed Names: works the same way for file and folder names, and you can use wildcards such as *proposal*.
• Maximum Item Count: the most files the list shows. Folders are not counted. Leave it empty to show them all.

Step 6: Change How the List Looks (Advanced Tab) #

Now let’s set up the columns and buttons:

• Click on Advanced in the left menu.
• Under Module Container, you can set a Width and Height (for example, 100% or 800px). Leave them empty for auto.
• In List Settings, choose what each row shows:
• Show Table Header: shows the Name, Size and Modified titles above the list.
• Show File Size Column: shows how big each file is.
• Show Modified Date: shows when each file was last changed.
• Allow File Downloads: adds a download button to every row. Turn it off and the download buttons disappear from the list and the preview window.

Scroll down to Sorting to choose the order of the files:

• Sort By: pick Name, Size, Created Date, Modified Date or Random.
• Sort Direction: pick Ascending or Descending.
• Enable Initial Files Sorting: applies this order as soon as the list loads. Turn it off to keep the order the files have in Google Drive; the sort button then just reads Sort.

Visitors can still change the order themselves with the sort menu at the top of the list.

Step 7: Choose Who Can Do What (Permissions Tab) #

Here, you decide what visitors can do with your files:

• Click on Permissions in the left menu.
• Keep Preview on so visitors can open a file in a preview window. Below it you can set Inline Preview, Allow Pop-out, Media Preview Mode and Show Preview Thumbnails, and limit previews to some users with Filter Users & Roles.

• Keep Download on so visitors can save files to their computer. Use Filter Users & Roles if only some users should be able to download.

Further down, you will find a few more cards. A List only uses preview and download, so you can leave the other action cards (Delete, New Folder, Rename and so on) as they are.

• Usage Limits: caps how many files each user can download per day, week or month.
• Password Protection: asks visitors for a password before they see the list.
• Visibility: under Display For, choose Everyone or Logged In.

Step 8: Save Your Module #

Don’t forget to save your work:

• Click on Save changes at the top right.

Step 9: Add the List to a Page #

You can copy the shortcode, or let DriveHub add it to a page for you:

• Click on Embed at the top of the editor.
• To place it yourself, click Copy shortcode and paste it into any page or post. It looks like [drivehub id="27"]; your number may be different.
• Or click on Add to a page, then on Create a new page. (Pick Choose an existing page instead to add the list to a page you already have.)

The Create New Page window opens:

• Type a Page Title (for example, Proposals).
• Click on Create Page.

DriveHub creates a draft page with the shortcode already in it and shows Shortcode added to the page. Open the page with Edit Page, then click Publish when you are ready. You can also use the block editor or the classic editor to add the module.

Step 10: See the List on Your Website #

And that’s it. Visit your page and you will see your Google Drive files in a clean list, with the size and date of each one:

Visitors click the eye icon (or the file name) to open a file in the preview window. They can move to the next file with the arrows, open it in Google Drive with Open, or save it with the download button:

On a phone, the list folds the size and date under each file name, so it still reads well on a small screen:

Benefits of Showing Google Drive Files as a List #

• Always up to date: Replace a file in Google Drive and the list shows the new version.
• Save WordPress storage: Your documents stay in Google Drive instead of your Media Library.
• Easy for visitors: Preview and download buttons sit right next to every file.
• You stay in control: Choose who can preview, download or even see the list.
• Works anywhere: Use the shortcode in any page, post or page builder.

With DriveHub, sharing a whole folder of documents on your website takes just a few minutes.

Related guides:

• How to Show a Google Drive Photo Gallery on Your Website
• How to Embed Google Drive Documents on Pages and Posts