WP Media Folder Addon: Dropbox Integration

1. Create a Dropbox App


The Dropbox integration is distributed as a separate Add-on. You need to install this add-on (plugin) additionally to WP Media Folder. The addon includes integration for Google Drive, OneDrive Personal, OneDrive Business and Amazon S3 too.

First, you need a Dropbox App to connect your website to a Dropbox account. Go to https://www.dropbox.com/developers and create a new app. 

 

create-dropbox-app

 

Then setup an app type: "Dropbox API", "Full dropbox" or "App Folder" and provide an app name.

Full Dropbox: File categories from WP Media Folder will be added as folders at the root of your Dropbox account (One website = One Dropbox account).
"App folder": all folders/files will be stored under a single folder (to avoid a mess in your Dropbox account).

 

dropbox-app-info

 
You're almost done - your app is created and you have your App key and secret.

 

app-create-dropbox

 

At OAuth 2 section, paste the Redirect URl from WP Media Folder Dropbox settings on the Redirect URls field, then click Add button. The URl should be like this: "https://joomunited.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=dropbox_authenticate"

 

redirect-url-mf

 

For more security in the future, you should choose the "Short-lived" option at OAuth 2 section > Access token expiration.

 

token-expired-dropbox-mf

 

And at the Permissions tab, you should set permissions as the image below.

 

permission-dropbox-setup


2. Login to Dropbox in WP Media Folder

To finalize the integration, go back to the WordPress dashboard and click on the menu Settings > WP Media Folder > Cloud > Dropbox tab. First, you can set the thumbnail for images.

Generate image thumbnail: This option will generate image thumbnails and store them on your cloud account. Image thumbnails will be generated according to WordPress settings and used when you embed images (for performance purpose)

 

generate-image-thumbnail-

 

 Then select your Media link type:

  • Public link: generate a public accessible link for your files and affect the appropriate rights on the cloud files (Shared link)
  • Private link: AJAX link, will hide the cloud link to keep the original access right of your file (Users need a login to view the images)

 

media-link-type

 

Then you can connect to Dropbox account with Automatic mode or Manual mode:

Automatic mode

From now, you can save a lot of time while connecting to the Dropbox server.  First, in order to use this feature, you have to link your Joomunited account at Menu Settings > General, please click on the WordPress settings link if you have not connected yet.

 

unconnected-dropbox

 

Then go back to the plugin Settings > WP Media Folder > Cloud > Dropbox tab and just click on Connect Dropbox button on the right corner.

 

connect-auto-dropbox

 

Then follow the next steps to finish the connection.

 

connected-auto-dropbox

 

It's so quickly, right? Yes, we know it. :) 

 

Manual mode

With the credentials in the previous step, please go to WordPress admin and click on the menu Settings > WP Media Folder > Cloud Connection tab > Dropbox settings section and paste your

  • App key
  • App secret

Then you Save the configuration, after that click on Connect Dropbox button.

 

dropbox-wp-connection

 

You'll have to validate the access authorization for app access - simply click the Allow button.

 

dropbox-app-allow

 

The connection should be a success ☺ If it is successful, you can create folders and sub-folders in Dropbox and in WP Media Folder. Everything will be synchronized automatically!

Update from Dropbox v1 API to v2 API version

Due to a major change in the Dropbox API on 19 February 2022 the Dropbox apps previously created require an update to the API v2 to work again. If your app was created recently before the date mentioned or you used the automatic connector (you didn't create a custom App), there are chances you just need to logout/login to resolve the issue.
If not, you should follow these steps to move your data from the old Dropbox app to a new app.

 

Option 1: Continue to use your old Dropbox App

Case 1: You used automatic connector

This is the easiest scenario. Just open the plugin Settings > WP Media Folder > Cloud connection > Dropbox tab and Disconnect/Reconnect from your Dropbox account to resolve the issue.

 

connect-auto-dropbox

 

Case 2: You used a custom Dropbox App created recently

Please try to add Authorized redirect URIs in Dropbox settings to your Dropbox App and reconnect the Dropbox account in WP Media Folder. If it works, that’s all what you need to do.
If this procedure is not working, you should move to the option 2 below.

Add the Authorized redirect URIs under the OAuth 2:

 

redirect-url-mf

 

And at the Permissions tab, you should set permissions as the image below.  Then you should click on Migrate button.

 

permission-dropbox-setup

 

Then reconnect the App from WP Media Folder settings

 

dropbox-wp-connection

 

Option 2: Connect a new Dropbox app and move files

Step 1. You should create a new Dropbox App and connect your Dropbox account from the WP Media Folder settings. Please follow these steps detailed in the chapter 1 from this documentation to proceed.

 

create-app

 

Step 2. Move your Dropbox files and resynchronize

After connecting your new Dropbox App to your WordPress website, you should move all folders and files from the old App root folder in Dropbox. Just drag'n drop all your folders under the new folder used by the new app.
Then wait for the full synchronization, depending on the amount of data it may take a while.

 

new-app-file-move

 

3. How does it work? What can I do with Dropbox?

How does it work? 

Dropbox can synchronize folders or sub-folders and files on your WP Media Folder interface, and the same is possible the other way round (from WP Media Folder to Dropbox).

 

dropbox-web


What are the sync directions?

It works in both directions! You can add a file to Dropbox and see it in WP Media Folder, or add a file using WP Media Folder and see it in Dropbox. It also means you can manage WP Media Folder files from your desktop using Dropbox sync software. That’s crazy - we know! ☺

 

Dropbox-two-way-sync

 

The WP Media Folder Dropbox integration allows you to perform 2 types of actions with your media:

The first option is to Import the Dropbox media in WP Media Folder by selecting a folder to copy.

 

import-dropbox-folder

 

The second alternative is to Embed the Dropbox media in your content directly. In this case, the media will be loaded into your content from Dropbox, not from your server.

 

dropbox-media-embed