fbpx
  1. wallprint67
  2. Pres-sale questions about WP Media Folder
  3. Tuesday, January 14 2020
  4.  Subscribe via email
Hi,

is it compatible with digitalocean spaces and other S3 likes ?

And Is it compatible with flatsome UX Builder

Thanks !
Responses (5)
Accepted AnswerPending Moderation
Hi,

Thanks for contacting us here about this extension.

is it compatible with digitalocean spaces and other S3 likes ?

We have not supported Digital Ocean yet, you can use Amazon S3 currently: For more details:

https://www.joomunited.com/wordpress-products/wp-media-folder/amazon-s3-integration-with-wordpress-media-library

And Is it compatible with flatsome UX Builder

Yes, it's compatible with almost page builder.

Hope it helps!
Cheers,
Accepted AnswerPending Moderation
Hi,

Thanks for your answer.

as DO is S3 compatible maybe it works with DO credentials and server address, no ? :) did you tried it?
Accepted AnswerPending Moderation
Hi,

Thanks for getting back to me with more information.

as DO is S3 compatible maybe it works with DO credentials and server address, no ? :) did you tried it?


We have not tested with DO and I think it's not possible.

Cheers,
Accepted AnswerPending Moderation
You can use it with DigitalOcean, there is a simple hack to make it work:

digitalocean.png

Since I just did it for a client, I'll detail the hack, and then explain how you would get it to work separately.

--

Whilst we haven't got it 100% working yet, we've made significant progress:

1. Hack

DigitalOcean Spaces is built around S3's API, and uses Amazon's "AWS SDK" PHP library (which is bundled with the plugin).

In discovering this, I figured that since DigitalOcean promotes using the SDK with its own product, hacking some of the code to make it work wouldn't be overly difficult.

To do this, I found that the way the plugin works is with two class files (for each service) -
./class/wpmfAddonAws3Admin.php
&
./class/wpmfAws3.php
(for S3).

The "admin" file is where the front-end functionality lies; the other is for interfacing with the S3 SDK. In short, the "admin" file is loaded via Ajax or the WP front-end, and its functionality invokes the S3 file (using stored credentials), allowing it to perform actions (like syncing) to your S3 bucket. This works very well, but there is one major problem in getting it to work with DigitalOcean:

endpoint.png

DigitalOcean is NOT region agnostic. This means that each request is scoped to a specific region, whilst S3's is not. This isn't a problem in of itself (our hack will still work), but if you want to achieve "full" functionality (different regions/buckets), you need to ensure you will have to invoke the "non admin" class with custom credential settings each time.

-

The hack consists of the following:

a) Change the "admin" file to use the "endpoint" for your DigitalOcean Spaces region
b) Ensure the 'us-east-1' region is set at all times
c) Change the "attachment URL" for each of the synced attachments in your media library

-

The first step is to change the "default" options in the "admin" file:

admin.png

Starting at line 34 of
./class/wpmfAddonAws3Admin.php
, you will see that a set of default settings are created for the other class. You need to do the following:


  • Change the "region" to 'us-east-1'
  • Add the line
    "endpoint" => "https://[[REGION]].digitaloceanspaces.com"



In the case above, our "region" is AMS3. This may be different depending on the location of where your space is kept.

Changing this code doesn't really do a lot, but ensures that the same defaults are used each time (and that the "endpoint" is set, which is the basis of the whole hack).

-

After doing this, we then turn to the other class file
./class/wpmfAws3.php
:

class.png

This, as mentioned, is invoked each time the "admin" class wishes to communicate with S3/DO.

What we're going to do here is "spoof" the endpoint, meaning that we hard-code it. This will change the URL the AWS SDK sends requests to, which means that our DigitalOcean credentials should be accepted. To do it, simply add the following two lines at line 73 & 74 respectively:

#73 $args['region'] = 'us-east-1';
#74 $args['endpoint'] = 'https://ams3.digitaloceanspaces.com';

The above will force the "endpoint" to be changed each time you use any of the "admin" functionality.

It works by taking the above details and merging them with your stored S3 credentials (in your case, DigitalOcean API key), allowing the script to communicate with DO. I described above that this is limited because it means you are only able to communicate with a single DO region (something I will address fully in a minute).

-

After doing this, the final thing we need to do is change the "URL" for each of the attachments synced with DO.

This is done inside the "admin" class, in the functions "wpGetAttachmentUrl" (#2048) and "addMetaInfo" (#1121):

1121.png

2048.png

I'm not sure which of these functions actually provides the functionality (I believe it's #2048), but I changed them both anyway.

Ultimately, all you're doing is changing the AWS link to a DigitalOcean one. The one that worked well for this hack was the following:

#2057 return 'https://' . $infos['Bucket'] . '.ams3.digitaloceanspaces.com/' . str_replace(' ', '%20', $infos['Key']);

This changes the "link" that the WP media has to DigitalOcean Spaces, which should show it in the backend and frontend of your site.

--

I'll detail the wider fix in another post.
Attachments (6)
Accepted AnswerPending Moderation
2. "Full"

As mentioned above, the "full" fix is dependent on how DigitalOcean interfaces with the AWS SDK.

In simple terms, S3 allows you to "connect" and then pick a bucket in any region; DigitalOcean only permits you to connect and interact with a single region each time.

If you wanted to achieve the full functionality of the plugin (with DigitalOcean), there is a lot of customization which needs to happen in the "admin" class. You basically need to make sure that EVERY request is scoped to the correct endpoint, which is both time consuming and quite expensive (in terms of API connections).

-

We've "sort of" got this working, albeit loosely. I'm writing this here as a means to share the progress, and maybe someone else would prefer to take it up or something.

--

You need to do 4 major things to get it working separately:

1. Create a separate "DigitalOcean" UI flow
2. Remove any references to S3 (replacing with DigitalOcean as necessary)
3. Change the flow of certain features to permit cross-region support
4. Ensure DO does not interfere with S3

-

1. To add a separate "DigitalOcean" tab, you need to go to the original plugin and locate the "cloud.php" file (./class/pages/settings/cloud.php):

<div id="do" class="tab-content">
<div class="wpmf_width_100 p-tb-20 wpmf_left top_bar">
<h1 class="wpmf_left"><?php esc_html_e('DigitalOcean', 'wpmf') ?></h1>
<?php
require WP_MEDIA_FOLDER_PLUGIN_DIR . '/class/pages/settings/submit_button.php';
?>
</div>
<div class="content-box content-wpmf-general">
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Missing -- View request, no action
if (isset($_POST['btn_wpmf_save'])) {
?>
<div class="wpmf_width_100 top_bar saved_infos" style="padding: 20px 0">
<?php
require WP_MEDIA_FOLDER_PLUGIN_DIR . '/class/pages/settings/saved_info.php';
?>
</div>
<?php
}
?>

<div>
<div class="wpmf_row_full">
<?php
if (is_plugin_active('wp-media-folder-addon/wp-media-folder-addon.php')) {
// phpcs:ignore WordPress.Security.EscapeOutput -- Content already escaped in the method
echo $html_tabdo;
}
?>
</div>
</div>
</div>
</div>


I just added it after the S3 tab.

To make it work, you then need the $html_tabdo variable to be populated, which is done by changing two files.

The first is ./class/pages/settings/wp-folder-options.php file (main/original plugin):

S3.png

The second is ./class/class-wp-folder-option.php:

html_do.png

This will populate the tab with the various DigitalOcean settings.

-

2. To replace S3 with DO, you need to ensure you have a completely different set of files & queue settings to ensure that the two systems to not conflict.

This requires doing a number of things, mainly creating a new set of "admin" and "connection" classes. I won't go into the depths of how to do this, but you basically want to be create a new set of classes which create their own config settings, and use those to connect to the endpoints for DO:

api_code.png

-

3. Cross region support.

As mentioned in the post above, DO's system works differently to S3, in that every request is scoped to a specific region (S3's is region agnostic).

This means that if you want to work with buckets/spaces from other regions, you need to work some magic to make it all work together.

I'm getting short on time, so won't cover the whole thing here, but will say that if you wanted to get the system working, you need to edit the "./class/wpmfDo.php" file in the backend - ensuring that you are able to pass the "endpoint" you wish to invoke the instance of the SDK for...

endpoint.png

This gives us the ability to define different "endpoints" ("regions";) for when you need to list different spaces etc.

A good example of this in action is when you want to list the buckets available:

region.png

To achieve the above, you need to cycle through all the regions available in DO, and then create a new array of available buckets. As you'll appreciate, this was a tricky solution to create:

buckets_list.png

This creates the $list_buckets variable from the different regions (not just the one you used to connect with).

-

4. Have not done this yet

Basically, you need to be able to make DigitalOcean work with S3, even when S3 is present.

This will require making the "sync" functionality work and a number of other things, which I have not completed yet.
Attachments (6)
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!