How to Add a File Browser Module | CodeConfig
CodeConfig Banner
CodeConfig Halloween Banner
CodeConfig Halloween Banner
CodeConfig Halloween Offers
00
Days
00
Hours
00
Min
00
Sec

Halloween25

GRAB IT NOW
CodeConfig Halloween Banner
Integration For Google Drive Logo

Google Drive

28
Getting Started
Purchase and License
Module Builder
Page Builder Integration
Media Library Integration
Auto Synchronization
Settings
Others

How to Add a File Browser Module

The File Browser module lets you embed a browsable Google Drive view anywhere on your site with fine-grained controls for sources, filters, UI, permissions, search, and notifications.

Quick Start

  1. Go to Google Drive → Module Builder.
  2. In Modules, choose File Browser and click Next.
  3. In Source, select the folders/files to display, then Save ChangesNext.
  4. Configure Filter, Advanced, Notifications, and Permissions as needed.
  5. Click Finish to generate the module and place it where you want.

Step 1 Modules

  • Choose Module → Start by selecting the File Browser module from the Modules tabHow to Add a File Browser Module Step-1

Step 2 Source

Select the Drive locations that the module will show.

Tip: In any file grid, you can Ctrl/Cmd + Drag to select multiple items quickly.
  • Pick Folders/Files: Click items to select; chosen items appear in the right sidebar list.
  • Upload / Create Folder / Refresh: Available from the toolbar.
  • Sort & View: Toggle Grid/List, and change sort (Name, Size, Created At, Updated At) with Ascending/Descending order.How to Add a File Browser Module Step-2

Step 3 Filter

Decide which items are visible in the module.

  • Allowed Extensions: Show only specific file types.
  • Exclude Extensions: Hide certain file types.
  • Allowed Names: A comma-separated list. Supports wildcards:
    • report*, *.txt
    • file?, image_*
  • Apply To: Choose whether name filters apply to Files, Folders, or both.How to Add a File Browser Module Step-3

Step 4 Advanced

Module Settings

  • Container Size: Set width/height (e.g., 100%, 640px, 80vh), or leave blank for default.
  • Theme: Light or Dark.How to Add a File Browser Module Step-4

File Loading Type

  • Load More (button), Infinite Scroll, or Pagination.
  • Files in First Render: Initial batch size slider.

Header Controls

  • Show Header — toggle the entire header area.
  • Breadcrumbs — show path navigation.
  • Refresh Button — reload items on demand.
  • Sorting — expose sort UI to viewers.
  • Default Sort: Name / Size / Created At / Updated At + Ascending/Descending.

Step 5 Notifications

Send email alerts for user activities performed in this module.

  • Email Notifications — master toggle.
  • Download Notification — email when files are downloaded.
  • Upload Notification — email when files are uploaded.
  • Delete Notification — email when files are deleted.
  • Email Recipients — choose recipients (e.g., admin) and Skip Current User Notification if you don’t want to notify the actor.

Step 6 Permissions

Choose who can view the module and which actions they may take.

Action Permissions

Enable actions and optionally restrict by audience (Everyone / Logged):

  • Allow Upload — choose who can upload (Role-based or User-based targeting supported).
  • Preview — inline lightbox preview; optional:
    • Inline Preview (open in modal)
    • Allow Pop-out (open in Google’s native viewer)
    • Show Preview Thumbnails
  • New Folder (if available in your build)
  • Rename
  • Move / Copy
  • Delete
  • Download
  • Enable Password Protection — require a password to access the module.
    • Password generator & strength rules (min length, mixed case, numbers, symbols).
  • How to Add a File Browser Module Step-6

Let viewers search files by name with precise controls.

  • Allow Search — master toggle.
  • Search Location Options
    • Cache — search the cached index for speed.
    • Server — live search against Google Drive.
  • Search Scope Options
    • Current Folder — limit to the visible folder tree.
    • Global — search across all selected sources.
  • Filter Users & Roles — Everyone or Logged (mirrors viewer visibility when needed)

6.2) Display for

Display For (Viewer Visibility)

  • Everyone (public)
  • Logged (only authenticated users)

User Access (Audience Targeting)

  • Role-Based — pick roles (e.g., Administrator, Editor, Author).
  • User-Based — pick specific users.

Show Access Denied Message

  • Enable showing a message when a visitor lacks access.
  • Default: “You do not have access to this module.” (You can customize the text.)

Use this shortcode to display the File Browser:

[integration-google-drive id="1"]

Best Practices

  • Prefer Role-Based access for maintainability; use User-Based only for sensitive modules.
  • Enable Password Protection for internal modules embedded on public pages.
  • Use the Cache location for fast searches; fall back to the Server for exhaustive results.
  • Tune Files in First Render + Infinite Scroll for large folders to improve perceived performance.

Troubleshooting

  • Can’t see files? Check Source selection and Filter rules (extensions/names).
  • Actions disabled? Verify Permissions toggles and audience (Everyone vs Logged vs Role/User).
  • Slow listing? Switch to Load More or reduce First Render count in Advanced.
  • Search misses items? Try Server location and Global scope, then Refresh.