Resize and Upload your images to Digital Ocean Spaces with Strapi.js

A couple of months ago, I went on a quest to find good cms that could work with node.js. The API creation process with express was repetitive for most of my use cases. I was pleasantly surprised to find that an open-source project was published, strapi.js, which is one of the best node.js free cms you will find.

Strapi allows you to build APIs in a matter of hours, all of that without trading customization. It is fully adaptable and provides a wide array of features. one of which is the possibility to plug your cms to a storage provider of your choice like Amazon s3, google cloud storage, and more.

If you haven’t heard of strapi.js, you might want to check them out. This article is not an introduction to strapi.js. Read this to get started quickly.

You might have heard of Digital Ocean as a VPS provider, they provide a space API for object storage for a whooping… 5 dollars a month, the plan includes 5Go of storage, you can sign-up for a digital ocean account using my referral link to get $100 worth of credit for a trial period of 2 months.

To use a storage service like s3, strapi allows the easy creation of storage providers. but don’t worry, you won’t have to create one for this tutorial as I have created one just for you.

Now set up a quickstart strapi project by using the following command:

npx create-strapi-app my-project --quickstart

Everything setup? follow the steps below to use digital ocean spaces with strapi.

First of all, you need to install the provider using yarn/npm.

npm i strapi-provider-upload-aws-s3-sharp-resize

Or

yarn add strapi-provider-upload-aws-s3-sharp-resize

Now that the provider is installed, create a settings.json file in the following directory.

project-root-folder/extensions/upload/config/settings.json

Settings.json is where all the magic will happen, paste the code below in it

{
  "provider": "aws-s3-sharp-resize",
    "providerOptions": {
      "accessKeyId": "YOUR_ACCESS_KEY_ID",      
      "secretAccessKey": "YOUR_SECRET_ACCESS_KEY",
      "endpoint": "nyc3.digitaloceanspaces.com",
      "optimize": {
        "resize": true,
        "width": 1000,
        "height": 1000
      },
      "settings": {
        "awsUploadFolder": "your upload folder"
      },
      "params": {
        "Bucket": "strapi-app"
      }
   }
}

You might want to use env variables to store your access key and secret.

By default, strapi generates multiple formats (large, medium, small) of your file, alongside the original file and the thumbnail, for a total of 5 image formats.

To disable that behavior in order to only store 2 versions of your file; the original and a thumbnail, from your local admin panel, head over to settings, and under media-library disable responsive friendly upload.

To disable resizing of your image files prior to upload, set resize to false in your settings.json.

This is it, you are now able to connect strapi to digital ocean spaces!

Did you like this article? I’d like to read your feedback. Share it with anyone who might find it useful.

USEFUL LINKS:

🔗 Digital Ocean Affiliate Link
🔗 Getting started with strapi