How to Create File Browser Module?

The File Browser Module allows users to browse specific files and folders within Google Drive, providing an easy way to explore and manage their content. By following the guidelines, users can quickly navigate through folders and access files, enabling them to open, view, or download documents with ease.

All of this is made possible within a simple, organized interface that enhances the browsing experience.

Step-1: Choose File Browser Module

Navigate to Google Drive.
Click on Module Builder from your WordPress dashboard.
Click on Add New Module button.
Select the File Browser module.
Rename the module title if required.

Step-2: Configure Source Tab

After selecting the File Browser Module, you will select the files and folders you expect to share publicly.

From the Source tab, select your files and folder.
Your selected items will be highlighted on the right side.
Arrange the items by dragging them up or down.
During this process, you will notice a few options.

Here is the detailed breakdown for each setting you will discover there:

All Folders & Files: If All Folders & Files is enabled, visitors can navigate through all the folders & files of all the linked Google Drive accounts.
Use Private Files: Turn ON to upload the files in the private folder linked to the user. Note: If enabled, this module will be visible only to logged-in users.
- Create Private Folder: Turn ON to create and link a folder automatically to the user who has not linked any folder yet, while the user views the module.
  - Folder Name Template: Set the folder name template for the automatically created private folders.
  - Parent Folder: Select the parent folder where the automatically created private folders will be created.
  - Template Folder: Select the template folder that will be copied to the new private folder.
Use ACF Field Files: Enable this option to use the ACF field files dynamically as the source for the module. Enter the ACF field name in the ACF Field Key input box to use the files from the ACF field.
Merge Selected Folder Files: Displays files from the initially selected folders together in a single list.

Step-3: Configure Filter Tab

If you want to include/ exclude something, this step will be helpful for you. The Show Files & Show Folders options are given if you desperately want to show or hide your files & folders.

Show Files: Exclude any files from this option. If turned off, files won’t show.
Show Folders: Exclude any folders from this option. If turned off, folders won’t show.
Allowed Extensions: Enter comma (,) separated file extensions to allow, such as “jpg, png, gif”. Leave empty to show all extension files. When “Allow all” is enabled, exceptions will not be displayed.
Allowed Names: Enter file and folder names, separated by commas, to display. Leave blank to display all files and folders. When “Allow all” is enabled, exceptions will not be displayed.
Maximum File Numbers: Enter the maximum number of files you want to show. Leave empty to show all files.

Step-4: Configure Advanced Tab

The next step is to set up advanced options. There are multiple customizations you can do depending on your test and needs. Let’s dive into the guide.

Module Container: Set the module container width and height. You can use any valid CSS unit (pixels, percentage), eg ‘360px’, ‘780px’, ‘80%’. Keep blank for a default value.
Browser View: Select the file browser view (Grid or List)
- Show Last Modified Field: Show/ hide the file’s last modified date field in the list view.
Enable Lazy load: Enable file lazy load to avoid loading all files at once.
- Files Loading Type: Select the file loading type for the lazy load.
  - Scroll – Loads more files as the user scrolls to the bottom.
  - Pagination – Navigate through files using page numbers.
  - Load More Button – Load files with a button click.
- Number of Files to Load: Set the number of files to load on each lazy load.
Show Header: Show/ hide the file browser header.
- Show Breadcrumbs Navigation: Show/ hide the breadcrumbs folder navigation in the header.
- Show Refresh Button: Show/ hide the refresh (sync) button in the header.
- Show Sorting Button: Show/ hide the files sorting options button in the header.
Sorting: Using this feature, you can sort files by Name, Size, Created Date, Modified Date, Ascending, or Descending Direction. Select the option you are thinking of implementing. Click Next.

Step-5: Configure Notifications Tab

Now you will be redirected to the Notifications tab, where you will customize notification settings configuration.

Enable Notifications: Enable email notifications to get notified on various user activities (upload, download, delete, etc).
- Download Notification: Receive an email notification whenever files are downloaded through this module.
- Upload Notification: Receive email notifications whenever someone uploads files through this module.
- Delete Notification: Receive email notifications whenever someone deletes files through this module.
- Search Notification: Receive email notifications whenever someone searches for files through this module.
Notification Recipients: Enter the email address where the notifications will be sent. Add multiple email addresses by separating them with a comma (,). You can also set the placeholder tags below as email recipients.
- Skip Current User Notification: Enable to skip the notification for the user who executes the action.

Step-6: Configure Permissions Tab

After completing the Advanced options customization, head over to the Permission tab. Here you will mostly work on permission-related tasks.

Upload: While the option is enabled, users will be allowed to upload files. Otherwise, they won’t.
- Overwrite Files: Enable overwriting files with the same name.
- Enable Folder Upload: Allow users to upload folders. A folder upload button will be added.
- Enable File Description: Allow users to add a description to the uploaded files.
- File Name Template: Set file name template. You can also use the available dynamic placeholder tags.
- Filter Users & Roles: Select users & roles who can upload files.
Preview: Allow users to preview files. Here, you can also allow Inline Preview & Popout Preview for users.
- Inline Preview: Open preview in a pop-up lightbox. If disabled, the preview will be opened in a new tab.
- Allow Pop-out: The pop-out button allows the user to view the document on Google Drive with full features, while disabling it will only show the preview document on your website.
- Media Preview Mode: Choose how images, audio, and video files are displayed: direct media (browser-native) or Google Drive’s native embed viewer.
- Show Preview Thumbnails: Show/ hide the file thumbnails at the bottom of the lightbox preview.
- Filter Users & Roles: Select users & roles who can preview files.
Download: Allow users to download files and folders directly from your Google Drive once enabled.
- Folder Download: Allow users to download entire folders as a ZIP file.
- Multiple Files Download: Allow users to download multiple files as a ZIP file.
- Show File Size Field: Show/ hide the file size field in the file list.
- Filter Users & Roles: Select users & roles who can download files.
Edit Documents: Allow users to edit Google Docs and Office documents.
- Filter Users & Roles: Select users & roles who can edit documents.
Delete: Allow users to delete any files & folders.
- Filter Users & Roles: Select users & roles who can delete files & folders.
New Folder: Allow users to create new folders. Enable if you want to permit your users to create new folders.
- Filter Users & Roles: Select users & roles who can create folders.
Move/ Copy: Give permission to your users to move or copy files & folders from here to there.
- Filter Users & Roles: Select users & roles who can move/ copy files.
Rename: Once the option is enabled, users can rename files & folders if they want to!
- Filter Users & Roles: Select users & roles who can rename files.
Create Documents: Allow users to create Google Docs and Office documents.
- Filter Users & Roles: Select users & roles who can create documents.
Allow Share: Allow users to share files & folders. Once enabled, users will be able to share everything; otherwise won’t.
- Filter Users & Roles: Select users & roles who can share files.
Direct Link: Allow users to generate direct links for files on your website.
- Filter Users & Roles: Select users & roles who can share files.
View Details: Allow users to view file & folder details (owner, created & modified date, etc).
- Filter Users & Roles: Select users & roles who view the file details.
Allow Comments: Allow users to comment on files while they view the file in lightbox preview.
- Comment Method: Select the comment method you want to use.
- Filter Users & Roles: Select users & roles who can comment on files.
View Switching: Allow users to switch between the grid and list views of the file listing.
Allow Search: Allow users to search for files.
- Full-text Search: Allow to search in file content, descriptions, tags, and other metadata.
- Initial Search Term: Set initial search terms to trigger a search when the shortcode first loads.
- Filter Users & Roles: Select users & roles who can search for files.
Usage Limits: Enable download restrictions for users to control the download access for this module.
- Daily Downloads Limit: Set the maximum number of downloads allowed per day for users. Keep blank for unlimited.
- Daily Download Limit / File: Set the maximum number of times the same file can be downloaded by users per day. Keep blank for unlimited.
- Daily Bandwidth Limit: Set the maximum bandwidth (MB) allowed per day for users. Keep blank for unlimited.
- Exclude Users & Roles: Select the roles and users who will be excluded from the download restrictions.
  - Exclude All: When activated, the download restrictions will only be applied to the selected roles and users.
Enable Password Protection: Enable password protection for this module. Users will need to enter the password to access the module.
- Password: Set the password for this module.
Display for: Select the user roles and specific users who are allowed to access the module.
- Everyone: Display the module for everyone.
- Logged In: Display the module for logged-in users only.
- Filter Users & Roles: Select the users and user roles who can see the module.
  - Everyone Expect: When activated, the module will be visible to everyone except for those specifically exempted.
- Show Denied Message: Show a message to users who don’t have access to the module.
- Display Login Screen: Display a login message for the modules when authentication is required.

While you have finished everything, click Save Changes and copy the shortcode from the module builder page.

Now you can use the shortcode to display the file browser module inside any posts or pages.