WPDM Dropbox Explorer – Complete Setup Guide & Documentation

WPDM Dropbox Explorer seamlessly integrates your Dropbox storage with WordPress Download Manager, allowing you to serve files directly from Dropbox without consuming your server’s bandwidth or storage space.

Key Features

• Direct Dropbox Integration – Browse, select, and attach files from your Dropbox account directly within the package editor
• File & Folder Support – Attach individual files or entire folders to your download packages
• Built-in File Explorer – Full-featured admin file manager to browse, upload, create folders, and manage your Dropbox files
• Frontend Dropbox Explorer – Display your Dropbox files to visitors using shortcode, Gutenberg block, or Elementor widget
• Bandwidth Optimization – Stream files directly from Dropbox servers, reducing your hosting bandwidth usage
• Secure OAuth 2.0 – Industry-standard authentication with automatic token refresh
• Thumbnail Previews – Automatic image and document thumbnails for visual file identification
• Search Functionality – Search files within your Dropbox storage
• Dark Mode Support – Follows WordPress theme preference

Requirements

• WordPress Download Manager Pro 6.0.0 or higher
• Dropbox account (free or premium)
• Dropbox API App credentials (App Key & Secret)
• PHP 7.4 or higher

---

Dropbox App Setup (Step-by-Step)

Step 1: Create a Dropbox App

1. Go to the Dropbox App Console
2. Click “Create app” button
3. Select “Scoped access” as the API type
4. Choose “Full Dropbox” to access all files, or “App folder” for limited access
5. Enter a unique name for your app (e.g., “MyWebsite Download Manager”)
6. Click “Create app”

Step 2: Configure App Permissions

After creating the app, go to the “Permissions” tab and enable the following scopes:

• account_info.read – Read account information
• files.metadata.read – Read file and folder metadata
• files.content.read – Download file contents
• files.content.write – Upload and modify files

Click “Submit” to save permissions.

Step 3: Get App Credentials

1. Go to the “Settings” tab of your Dropbox app
2. Copy the App Key
3. Click “Show” next to App Secret and copy it

Step 4: Add Redirect URI

1. In the “Settings” tab, scroll to “OAuth 2” section
2. Under “Redirect URIs”, add your site’s redirect URL:
   https://yourwebsite.com/dropbox-redirect
3. Click “Add”

Important: Replace yourwebsite.com with your actual domain. The redirect URI is also displayed in WPDM Settings → Dropbox Connect tab.

Step 5: Configure WPDM Settings

1. In WordPress admin, go to Downloads → Settings → Dropbox Connect
2. Select your Account Type (Personal or Business)
3. Enter the App Key from Step 3
4. Enter the App Secret from Step 3
5. Click “Save Changes”

Step 6: Connect Your Account

1. After saving credentials, click the “Connect to Dropbox” button
2. A popup window will open asking you to authorize the app
3. Click “Allow” to grant access
4. The popup will close and you’ll see a green “Connected” status

Step 7: Set Root Folder (Optional)

After connecting, you can optionally set a Root Folder to limit browsing to a specific Dropbox folder. Leave empty to access your entire Dropbox.

---

Using Dropbox with Packages

Attaching Files from Dropbox

1. Edit or create a new download package
2. In the “Attach File” metabox, click the “Select From Dropbox” button
3. Browse your Dropbox folders in the popup file picker
4. Select files or folders by clicking the checkbox
5. Click “Attach Selected” to add them to your package

File Picker Features

• List/Grid View – Toggle between compact list and visual grid layouts
• Create Folder – Create new folders directly from the picker
• Upload Files – Drag and drop files to upload to Dropbox
• Multi-Select – Select multiple files/folders at once
• Breadcrumb Navigation – Easy navigation through folder hierarchy

Dropbox Explorer (Admin)

Access the full Dropbox file manager from Downloads → Dropbox in your WordPress admin. This provides:

• Complete file and folder browsing
• File upload with drag-and-drop
• Folder creation and deletion
• File search functionality
• Direct download links

---

Frontend Dropbox Explorer

Display your Dropbox files to website visitors using any of these methods:

Shortcode

[wpdm_dropbox_explorer path="/Public/Documents" title="Shared Files" height="500px" allow_download="1"]

Shortcode Parameters

Parameter	Required	Default	Description
path	Yes	–	Dropbox folder path (e.g., “/Public/Docs”)
title	No	Folder name	Custom title displayed in header
height	No	500px	Explorer height (px, vh, or %)
allow_download	No	1	Enable downloads (1=yes, 0=no)
class	No	–	Additional CSS classes

Shortcode Examples

// Basic usage
[wpdm_dropbox_explorer path="/Public"]

// Custom title and height
[wpdm_dropbox_explorer path="/Documents" title="Company Documents" height="600px"]

// Read-only gallery (no downloads)
[wpdm_dropbox_explorer path="/Media/Photos" allow_download="0" height="400px"]

// With custom CSS class 
[wpdm_dropbox_explorer path="/Downloads" class="my-custom-explorer"]

Gutenberg Block

1. In the block editor, click “+” to add a new block
2. Search for “Dropbox Explorer”
3. Add the block to your page
4. Configure settings in the block sidebar:
   • Path – Enter Dropbox folder path
   • Title – Optional custom title
   • Allow Downloads – Toggle on/off
   • Height – Adjust using slider
5. Style options available for colors, borders, and shadows

Elementor Widget

1. In Elementor editor, search for “Dropbox Explorer” widget
2. Drag it to your page
3. Configure in the Content tab:
   • Dropbox Folder Path
   • Title
   • Allow Downloads toggle
4. Customize in the Style tab:
   • Dimensions (responsive height)
   • Container styling (border radius, shadow)
   • Header colors
   • File list styling
   • Download button appearance

Frontend Explorer Features

• Responsive Design – Works on all devices
• List/Grid Toggle – Users can switch view modes
• Breadcrumb Navigation – Easy folder traversal
• Search – Find files within the explorer
• Secure Downloads – Temporary links prevent direct Dropbox URL exposure
• Dark Mode – Automatically follows site theme preference

---

How Downloads Work

When a user downloads a Dropbox file from your site:

1. User clicks the download button
2. WPDM generates a temporary download link (valid for 4 hours)
3. User is redirected to download directly from Dropbox servers
4. Download is logged in your WPDM download history
5. Your server bandwidth is NOT used

Folder Downloads

When you attach a Dropbox folder to a package:

• Frontend shows a “Browse” button instead of direct download
• Users can browse the folder contents
• Individual files can be downloaded from within the folder

---

Troubleshooting

“Not Connected” Error

• Verify App Key and Secret are correct
• Ensure Redirect URI in Dropbox app matches your site URL exactly
• Check that required permissions are enabled in Dropbox app
• Try disconnecting and reconnecting

Files Not Showing

• Check if Root Folder setting is limiting access
• Verify the folder path exists in Dropbox
• Ensure files are not in Dropbox trash

Download Links Expired

• Dropbox download links are valid for 4 hours
• Page refresh generates new links
• This is normal Dropbox API behavior for security

Token Refresh Issues

• The plugin automatically refreshes tokens
• If connection fails, disconnect and reconnect in settings
• Check server can make outbound HTTPS requests

---

Security Notes

• OAuth 2.0 – Secure industry-standard authentication
• No Password Storage – Only OAuth tokens are stored
• Temporary Download Links – Links expire after 4 hours
• Path Validation – Prevents directory traversal attacks
• Permission Checks – Admin functions require proper capabilities
• Transient-based Sessions – Frontend explorer uses secure session tokens

---

Changelog

Version 2.0.1

• Complete rewrite with modern architecture
• Added Gutenberg block support
• Added Elementor widget
• New frontend explorer shortcode
• Improved OAuth token management
• Dark mode support
• Enhanced file picker UI
• REST API improvements