The hack to manage your website’s static files with Digital Ocean Spaces & php w/o writing a single line of code!

If you are a blogger, have a portfolio website OR own a small business OR in the process of building your startup, you must have dreamt of storing your large media files and scripts in the cloud. After all, we all know the power of media assets, don’t we? Hubspot says by the end of 2017, video content will represent 74% of all internet traffic.

But wait, that requires a good amount of money and you can’t afford that. Well, that was the story a few weeks back when Amazon Web Services and Google app engine were the only options who charge lump sum bucks for their services.

But Digital Ocean has come to our rescue again with their newly launched Object Storage named Spaces. It is similar to the Amazon S3 storage but a lot cheaper and the pricing is fairly straight forward.

Digital Ocean offers 250GB of storage space and 1TB of outbound bandwidth for $5, also they don’t charge anything per request. Same amount of storage space and bandwidth costs around $95 in Amazon Web Services, additional charges will apply for your GET /PUT requests. Take a look at the screenshots of Amazon’s monthly cost estimator below.

Till now everything seems like a piece of cake as you’re getting your storage very cheaply plus Digital Ocean has very easy-to-follow tutorials with an extremely thriving community! No, things are not inch-perfect as they appear, this is a very new feature of DO, they are yet to roll out all their tutorials, community members have just started to get their hands dirty and their documentation only supports two languages- python and GO.

If you are a python or Go developer then it will seriously be a breeze, but there are very high chances that you’re a PHP developer as W3Techs have pointed out in their November 2017 article, “PHP is used by 82.9% of all the websites whose server-side programming language we know”.

This article will walk you through the process of storing your first file in the Spaces Bucket using PHP even if you don’t know how to write “Hello World!” in it or in any other language.

The trick is mentioned in the Digital Ocean’s official spaces documentation.

The Spaces API aims to be interoperable with Amazon’s AWS S3 API.

What does that mean? Hold on, it’s not rocket science. It simply means any existing PHP class or library which can interact with Amazon’s AWS will be compatible with Digital Ocean’s spaces API. So, now as we know where to start , follow along with me with these simple steps.

#Step1: Create your Space

Log-In to your Digital Ocean account and click the green Create button in the top-right corner. Then select Spaces from the drop-down menu.

Choose a unique name for your Space. Spaces is available only in NYC3 region(as of now)so you won’t have to select anything. You won’t want anybody else to store files in your spaces so don’t change the default “Private” in “Manage Access” section, although you might select “Public” depending on your use case.

Yes, I know you’re wondering what this “Free until DEC 30” in the pricing section is, don’t worry we will come to it at the end of this article. As of now, just click the “create a space” button and your space will get created as you can see in the screenshot below.

#Step2: Use a PHP class which is written for Amazon s3 object operations

Remember, we discussed a while ago that Digital Ocean Spaces is entirely compatible with AWS PHP classes. So, any GitHub repository dealing with Amazon AWS object operations can be used to store files in Spaces.

In this tutorial we will be using Donovan Schönknecht ‘s Amazon-S3 PHP-class. The repository url is https://github.com/tpyo/amazon-s3-php-class and a special thanks goes to Mr. Schönknecht for writting such a clean php class.

#Step3 From the DO terminal git clone the repository

In the Droplets section select the droplet you want to use as your PHP server and click the “Access console” from the More drop-down. A black command prompt will appear.

Log-In to your droplet by entering your login and password. I won’t show you this step as it is highly confidential. Next you need to enter the root folder of Apache server

cd /var/www/html

and clone the GitHub repository in your root folder. Just type the command given below and your job will be done.

git clone https://github.com/tpyo/amazon-s3-php-class
Your console should look something like this.

#Step4 Modifying the main processing file S3.php(share image)

The main thing that we need to change here is the endpoint. Open your S3.php file using nano or vim editor:

vim amazon-s3-php-class/S3.php
or
nano amazon-s3-php-class/S3.php

Go to line no 94 and replace this:

public static $endpoint = ‘s3.amazonaws.com’;

with this:

public static $endpoint = ‘nyc3.digitaloceanspaces.com’;

Go to line 203 and replace this:

$endpoint = ‘s3.amazonaws.com’

with this:

$endpoint = ‘nyc3.digitaloceanspaces.com’

Don’t forget to save your file!

#Step5: Generating the Access key and Secret key

To interact with your newly created Space you need to keep your Access key and Secret key handy. For that you need to click the Manage Keys button in your Spaces page.

In order to access the Access Key & Secret Key you will have to click “Generate New Key” button as shown in the image below.

Give a unique name to your key as it will help you distinguish separate spaces using separate keys in the future. Then click the “ Generate Key” button.

It will generate your Access & Secret Key. For security reasons, I have hidden my Access Key & Secret Key but you will find your newly generated Keys exactly in those highlighted places of the page. Now, you should copy them as early as possible in a safe place as we will need that to complete the next step & Digital Ocean won’t show you your tokens for long as it can harm your security .

#Step6: Using the Access key and Secret key in a simple file uploader php page

The aforementioned repository comes with a built-in file uploader example. Open your example-form.php file using nano or vim editor:

vim amazon-s3-php-class/example-form.php
or
nano amazon-s3-php-class/example-form.php

Here you need to change four things.

Change1:

Replace “change this” portions in line nos. 11 & 12 with your Access key & Secret keys respectively.

Change2:

Change $bucket(on line no. 26) with the name of the Space you have created, in my case it is “mynewspace1”.

Change3:

In the picture above you can see the “Content-Type” is, by default, set to “application/octet-stream” on line no. 34, but this configuration will make the browser download file whenever you will try to access it. But, we don’t want that to happen and hence we will change it to something else. As in this demo we are using an image file, we will change it to png. The picture below demonstrates the change.

Change4:

Lastly, we need to change the $uploadURL on line 50. Replace “.s3.amazonaws.com/” with “.nyc3.digitaloceanspaces.com/”.

#Step7: Testing the setting by uploading a file to our Space

Fingers crossed, let’s check if it is working or not.

Open your favorite browser and navigate to the example-form.php file. Your url should be something like:

If you have your domain setup:
www.yoursite.com/amazon-s3-php-class/example-form.php
or if you don’t have a domain:
dropletspublicipaddress/amazon-s3-php-class/example-form.php

The page should look something like this:

If you have followed along with me till this point then you should be able to upload a file in your space. Go ahead , choose a file and click the upload button. Voila! You should see a page like this:

Navigate to your Spaces, click on “mynewspace1” and you should be able to see a “myfiles” folder. Click on “myfiles” and your uploaded file should be visible to you. In my case I had uploaded “gp_5.gif”.

Congratulations! You have just stored your first file in Digital Ocean’s brand new object storage “Spaces” with the help of a php class!

Conclusion

In this world there are very few things that come without a price tag. This php-class is also free & I must admit that DO is quite affordable, but many other libraries may cost a fortune. In the beginning of a startup journey we need to be very cautious, specifically with how we use our capital. Join www.shufflup.org to get the services you need without spending a single penny. Exchange your service with another startup or give equity. Shufflup helps to earn your first few customers & achieve your product market fit.

#Add-on:

Now, about the“Free until DEC 30” thing. Digital Ocean is letting us try their object storage Spaces at no cost for two months. Free usage include 250 GB of storage and 1 TB of outbound data transfer per month.

Don’t forget to follow Shufflup to get to know about more such free stuff in different social media accounts .

Follow on Twitter: @shufflup

If you need any help regarding this article, leave a comment or email me at shufflup@gmail.com & I will get in touch with you as soon as possible.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.