English English
X
You are using an advanced automatic translation tool. Note that although our extensions may be translated into your language (check the product page for that) the support is provided ONLY in english :)

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.

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: http://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_authenticated 
    (replace by your domain name)

 

app-credentials

 

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

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.

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. You can now 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.

image23


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 File Download 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 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. 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-wync

 

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 and Dropbox too.

First, you need a Microsoft App to connect your website to a OneDrive Personal account. Go to https://apps.dev.microsoft.com, login and create a new app. 

 

add-microsoft-app

 

On Microsoft's portal, setup an app name and click on the Add platform > Web button.

 

web-app

 

Copy your website URL into the redirect URLs field and click on the Save button.

 

platform-url


 
You're almost done - only the password is missing. Click on the Generate New Password button to create one.

 

new-password-1

 

A password is generated right away and opened in a lightbox; 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. 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!

Note: WP Media Folder Cloud addon does not support Business account

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 Dropbox 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. AMAZON S3 INTEGRATION

5.1 Create an IAM User

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

 

 

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

 

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

 

VI. 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!