WP Media Folder Cloud Addon Documentation

Introduction

The WP Media Folder Addon plugin brings a connection to Dropbox, Google Drive and OneDrive, alongside new features, like embedding PDF files, to WordPress' native media manager.

 

Cloud-banners-addon

 

I. WP MEDIA FOLDER CLOUD ADDON INSTALL

1.1 Install

The WP Media Folder Cloud addon is a separate plugin that needs to be activated separately. In order to install our plugin you should either use the standard WordPress installer, or unzip the plugin and put the folder in /wp-content/plugin.

 

install-wp-media-folder

 

Then click on activate plugin to see the WP Media Folder Cloud Addon menu appear in WordPress' side-menu.

The WP Media Folder Addon  is accessible from the media menu and the media button above your editor. You also have the parameters under the "Settings" menu.

 

1.2 Update the plugin

In order to update the WP Media Folder Cloud addon, you can use the WordPress default updater. You can also remove it and install the new version from a .zip file downloaded from www.joomunited.com. In any case you won’t lose any content because everything is stored in the database.

 

wpmf-addon-update

 

Be sure to always have the latest version to avoid security and stability problems.

To update to the paid version, you need to login to your JoomUnited account from the WordPress settings: Settings > General

 

link-account

 

Then use your JoomUnited account's login and password. After a successful login, the button turns to blue with the text Disconnect my JoomUnited account.

 

image9

 

In this way, you can update all the JoomUnited commercial plugins using the WordPress standard updater.

 

wpmf-addon-update1

 

II. CONNECT GOOGLE DRIVE

2.1 Create a Google Drive App


The Google Drive integration with WP Media Folder is is included in the Add-on. You need to install this add-on (plugin) in addition to WP Media Folder. The addon includes integration for Dropbox, OneDrive Personal, OneDrive Business and Amazon S3 too.

First, to use Google Drive you need a Google dev App to connect your website. Go to https://console.developers.google.com/project and create a new project.

 

image79

 

Then setup a project name - you can provide any name you want, but do not include spaces or accents.

 

image31


Then wait few seconds for the project creation.

 

image62

 

If it's the first time you're using the Google Drive API, you'll need to activate it.

 

enable-drive-api

 

From the left menu, click on “API Manager.”

 

image53


From the left menu, navigate to “Credentials” >> “New credentials” >> OAuth client ID; if asked, add a name to your OAuth consent screen.

 

oAuth-google-drive


Now, the most important step:

  • Select “Web application” and add a name of your choice
  • Authorized JavaScript origin: https://your-domain.com (replace by your domain name, with no trailing slash)
  • Authorized redirect URIs: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_authenticated 
    (replace by your domain name)

 

app-credentials

 

Google has changed their policy recently, so you need to fill your Authorized domains at OAuth consent screen tab.

 

authorized-domain

 

Moreover, you should add your domain at Domain verification tab. Please click on Add domain button and following the instructions.

 

add-domain

 

Now you can turn back to the previous step to create the credentials.

Then… voilà! You got your ID and Secret to add in WP Media Folder's configuration.

2.2 Login to Google Drive in WP Media Folder


Then go back in WordPress admin and click on the menu Settings > WP Media Folder > Cloud > Google Drive tab.

Please select your Media link type:

  • Public link: direct link from Google drive (share link)
  • Private link: AJAX link.

 

media-link-type

 

After that, you can paste your

  • Client ID
  • Client secret

Save the configuration and click on the Connect Google Drive button.

 

google-login

 

If you haven’t made any mistake you should validate the authorization in a new window as shown:

 

google-api-permission

 
The connection should be a success ☺ If it is successful, you can create and manage Google Drive media right from WordPress' media manager.

 

2.3 What can I do with Google Drive media?

How does it work? 

WP Media Folder will generate a root folder on your Google Drive with the site name.

 

google-drive-folder


All the folders and sub-folders added in WP Media Folder Google Drive will be synchronized under this folder.

 

What are the sync directions?

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

 

google-drive-sync

 

The WP Media Folder Google Drive integration allows you 2 types of actions with your media:

The first option is to import the Google Drive media in WP Media Folder (folder selection for import).

 

import-media-google-drive

 

The second option is to embed the Google Drive media in your content directly. In this case, the media will be loaded from Google Drive, not from your server.

 

embed-google-drive

 

Get rid of the error: error: "invalid_scope when connecting WP Media Folder with Google Drive"

Google has recently introduced a new security layer that forces apps to be verified.  If you've created the app with your Google account and then you log in from WordPress with the very same account you won't see this error.
This error will only appear if you've created an App with a Google account and trying to connect to Google from WordPress with another account.

In this case, you need your app to get approved by Google following this process: https://support.google.com/code/contact/oauth_app_verification

 

OAuth-Developer-Verification-Form

 

III. DROPBOX INTEGRATION

3.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


3.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.

Please select your Media link type:

  • Public link: direct link from Dropbox (share link)
  • Private link: AJAX link.

 

media-link-type

 

After that, 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

 

Finally, an authorization code will be generated. Copy this code into WP Media Folder's configuration.

 

copy-autho-code

 

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!

 

3.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

 

IV. ONEDRIVE INTEGRATION

4.1 Microsoft OneDrive Application Registration


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

First, you need a Microsoft Azure App to connect your website to a OneDrive Personal account. Go to https://portal.azure.com/, login and click on New registration button.

 

add-microsoft-app

 

On Register an application form, setup an app name and copy your website URL into the Redirect URL field and click on the Register button.

 

register-app


 
You're almost done - from here you have an Application ID (Client ID), only the password is missing. On the left menu, go to Certificates & secrets, then click on the New client secret button to create one. After that, fill the Description and set the Expires for it.

 

new-password-1

 

A password (Client Secret) is generated right away after pressing on Add button; copy it because you will need it soon.

 

new-password-2


4.2 Login to OneDrive from WP Media Folder


Return to the WordPress dashboard and click on the menu Settings > WP Media Folder > Cloud > OneDrive tab > OneDrive Personal settings.

Please select your Media link type:

  • Public link: direct link from OneDrive (share link)
  • Private link: AJAX link.

 

media-link-type

 

After that, paste the following into the form fields:

  • Client ID
  • Client Secret

 

credentials-copy

 

After that you save the configuration and hit the Connect OneDrive button.

 

connect-onedrive

 

You'll have to validate the access authorization to grant access to WordPress; just click Yes in the new window.

 

app-authorisation

 

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

4.3 How does it work? What can I do with OneDrive?

How does it work? 

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


What are the sync directions?

It works in both directions! You can add a file to OneDrive and see it in WP Media Folder, or add a file in WP Media Folder and see it in OneDrive. It also means you can manage WP Media Folder files from your desktop using OneDrive sync software.

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

  • Import OneDrive media in WP Media Folder (works automatically after connection)
  • Import OneDrive media into the WordPress media library

 

WordPress-Import-Media-OneDrive

 

  • Embed the OneDrive media in your content directly. In this case the media will be loaded into your content from OneDrive, not from your server.

 

embed-OneDrive-image

 

V. ONEDRIVE BUSINESS INTEGRATION

5.1 Microsoft OneDrive Business Application Registration


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

First, you need a Microsoft Azure App to connect your website to a OneDrive Business account. Go to https://portal.azure.com/, login and click on New registration button.

 

add-microsoft-app

 

On Register an application form, setup an app name and copy your website URL into the Redirect URL field and click on the Register button.

 

register-app-business


 
You're almost done - from here you have an Application ID (Client ID), only the password is missing. On the left menu, go to Certificates & secrets, then click on the New client secret button to create one. After that, fill the Description and set the Expires for it.

 

new-password-1

 

A password (Client Secret) is generated right away after pressing on Add button; copy it because you will need it soon.

 

new-password-business


5.2 Login to OneDrive Business from WP Media Folder


Return to the WordPress dashboard and click on the menu Settings > WP Media Folder > Cloud > OneDrive tab > OneDrive Business settings.

Please select your Media link type:

  • Public link: direct link from OneDrive Business (share link)
  • Private link: AJAX link.

 

media-link-type

 

Then paste the following into the form fields:

  • Client ID
  • Client Secret

 

credentials-copy-business

 

After that you save the configuration and hit the Connect OneDrive Business button.

 

connect-onedrive-business

 

You'll have to validate the access authorization to grant access to WordPress; just click Yes in the new window.

 

app-authorisation

 

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

5.3 How does it work? What can I do with OneDrive Business?

How does it work? 

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


What are the sync directions?

It works in both directions! You can add a file to OneDrive Business and see it in WP Media Folder, or add a file in WP Media Folder and see it in OneDrive Business. It also means you can manage WP Media Folder files from your desktop using OneDrive sync software.

The WP Media Folder Onedrive Business integration allows you to perform 3 types of actions with your media:

  • Import OneDrive Business media in WP Media Folder (works automatically after connection)
  • Import OneDrive Business media into the WordPress media library

 

Import-Media-OneDrive-business

 

  • Embed the OneDrive Business media in your content directly. In this case the media will be loaded into your content from OneDrive Business, not from your server.

 

embed-OneDrive-business-image

 

VI. AMAZON S3 INTEGRATION

6.1 Create an IAM User


The Amazon S3 integration with WP Media Folder is is included in the Add-on. You need to install this add-on (plugin) in addition to WP Media Folder. The addon includes integration for Google Drive, Dropbox and OneDrive too.

First, you need login to Amazon Console or sign up if you don't have a AWS S3 account.

Once you have logged into the console, you will need to create a new IAM user. Then go to the IAM Users page in the AWS Console, click the Add user button.

Next enter a name for the user and select the checkbox for Programmatic access as Access type, then click the Next: Permissions button.

 

create-user

 

To allow the new user to manage buckets and objects in the S3 service, you need to grant specific permissions. Click on the “Attach existing policies directly” button, and then enter “S3” in the filter policies input box. Select the “AmazonS3FullAccess” policy, then click the Next: Tags button.

 

user-permission

 

You can skip this step or add your key if needed. Then click on the Next: Review button.

 

add-tag

 

If everything looks good, click the Create user button.

 

review-user

 

A security screen will be displayed with security credentials for the user, which consists of an Access Key ID and a Secret Access Key. Amazon will not show these again so please download them as a .csv and also copy them somewhere safe. If you lose them, you can always create a new set of keys from the console but you cannot retrieve the secret key again later.

 

aws-s3-key

 

 

6.2 Login to Amazon S3 from WP Media Folder

Return to the WordPress dashboard and click on the menu Settings > WP Media Folder > Cloud > Amazon S3 tab. Paste the following into the form fields:

  • Access Key ID
  • Secret Access Key

 

input-key

 

After that, save the settings and the connection should be a success. Please go to the next step to discover AWS S3 features.

 

6.3 How does it work? What can I do with Amazon S3?

How does it work?

Once you've connected WP Media Folder with Amazon S3 and enable Copy to Amazon S3 option, all your new media uploaded will be sent to Amazon S3.

 

copy-to-aws

 

Remember to create and select bucket where all your data will be stored.

 

create-bucket

 

And if you want to sync your uploaded media before using Amazon S3 integration, click on Synchronize with Amazon S3 button. Then it will send all your existing media library to your S3 bucket.

Note: When you do this action the URL of your media will be replaced by the Amazon S3 URL. Please see the example below.
From https://joomunited.com/wp-content/uploads/2019/02/image.jpg to >> https://s3-us-west-1.amazonaws.com/joom-united/WP+Media+Folder+-+eStore/wp-content/uploads/2019/02/image.jpg

 

In order to offload the media on your site, you should enable Remove after Amazon S3 upload option, your media library will be completely stored on Amazon S3 instead of your server.

 

offload-media-amazon-s3

 

By enabling Amazon attachment label option, the information on each media will be displayed when you hover on the aws3 label on the top left.

 

amazon-label

 

When you want to change your media location or remove the plugin, click on Retrieve Amazon S3 Media button, then all your media will be copied from Amazon to you media library. All former link added in your content will remain in place (no broken link).

 

retrieve-aws

 

VII. EMBED PDF IN WORDPRESS CONTENT

You can embed PDF files in your content. This means displaying the PDF along the rest of the WordPress content, and not simply a download link. You will get full previews of the PDF documents, and the embed feature handles multiple page navigation with responsive design.

Just open a PDF document in your media manager and look at the bottom of the right column for the setting Embed PDF - turn it on.

 

PDF-embed

 

In this way, the PDF document will be displayed instead of a download link.

Embed PDF when using Amazon S3

You need to configure little bit to embed PDF files in your content if using Amazon S3. Please follow these steps below.

First, you navigate to the AWS console and find the S3 configuration area. After that select the bucket you are using to store your assets and select Permissions section on a pop-up window. 

 

pdf-permission

 

Under "Permissions"  tab click on "Add CORS Configuration" button. AWS will provide a default XML configuration that should work correctly:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorisation</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

However, you may prefer to limit access to your own WordPress site's domain, for security reasons:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://www.mysite.com</AllowedOrigin>
    <AllowedOrigin>https://www.mysite.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

 

pdf-config

 

You need paste the XML code above on the text area. Remember to click on Save button, now you can embed PDFs file in the content. Good luck!

 

VIII. SYNCHRONIZATION

In order to set the sync method and sync periodicity to the cloud folders, go to Settings > WP Media Folder > Cloud > Synchronization tab.

  • Sync Method: The Cloud synchronization method. Default is AJAX, advanced user only.
    • Use Curl
    • Use Ajax
    • Crontab url
  • Sync periodicity: Automatic Cloud content synchronization delay. Default is 5 minutes.

 

sync-settings

 

On WP Media Folder dashboard, there will be a sync icon besides the main cloud folder when synchronization.

 

sync-symbol

 

And if you manually press the Run full synchronization button by right clicking on the cloud folder, a notification message will be appeared on the top right corner.

 

sync-cloud-folders