Upload media to digitalocean spaces using strapi v4

[Tal_Shemer]

System Information

• Strapi Version: 4.1.1
• Operating System: windows
• Database: sqlite3
• Node Version: 16.13.2
• NPM Version: 8.4.1
• Yarn Version: 1.22.15

I recently deployed a strapi v4 to digitalocean app platform successfully. The issue is that I can’t integrate the DigitalOcean space for uploaded images.
I tried using the strapi-provider-upload-do package and followed the instructions, the folder structure in the instructions is different for strapi v4 so I went ahead and tried the newer upload provider that claims to be compatible with strapi v4 strapi-provider-upload-dos.
I followed the instructions but still unsuccessful.

I’m not even getting any errors, it just upload all images to /uploads directory instead of the Digital Ocean’s space bucket.

Does anyone know how to solve this issue?

[mrt-stl]

Hi @Tal_Shemer,

I’m using the strapi-provider-upload-do and it works just fine.

Here’s my config (under ./config/env/production/plugins.js):

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-do",
      providerOptions: {
        key: process.env.DO_SPACE_ACCESS_KEY,
        secret: process.env.DO_SPACE_SECRET_KEY,
        endpoint: process.env.DO_SPACE_ENDPOINT,
        space: process.env.DO_SPACE_BUCKET,
        directory: "media", // optional
      },
    },
  },
  // ...
});

I had to change the provider value from the short term to the actual package name, there’s a note in the docs about that.

Hope this helps. Reach out if I should clarify.

[Tal_Shemer]

Thanks! You’ve made my day

[Bipolab]

Hi! Do you have MIME Compatibility issues?
I published this post days ago, but I haven’t found a solution yet:

Strapi Provider Upload DO - MIME Compatibility

Hello! I am using DO Space with the “strapi-provider-upload-do” provider to save my media files. Everything is saved correctly in Spaces, but I am having the following problems and I don’t know if it is a problem with the provider of Strapi, or directly with Strapi. The first problem I encountered was that the media library didn’t show a preview of the images, so doing some research, I realized that strapi’s middlewares.js file needs to be configured as follows: module.exports = ({ env }) => [ …

Actually i am ussing strapi-provider-upload-dos which seems to be more updated for strapi v4

[mrt-stl]

Hi @Bipolab,

haven’t had any MIME issues so far and the media library works just fine. Where’re you uploading the files? In the administrator panel or via api?
I’m just using the media library by now.

[Bipolab]

I am using the administrator panel.
The video is uploaded and saved without problems in spaces. The problem is in Strapi’s preview. I don’t know if there is anything else to configure in the middleware.js file

[agdgdag]

as of today both strapi-provider-upload-do and strapi-provider-upload-dos wont work… always getting invalid enpoint: undefined error when trying to deploy to DigitalOcean. (using Strapi 4.1.6 btw) nobody maintains these plugins been stuck for 5 days now… already considering other upload providers because of this issue

[sarang_kkl]

It works fine just for the uploading but we face issue while getting the images and those issues are permession issue we cant see the images in the media

[sarang_kkl]

@Strapi Provider Upload DO - MIME Compatibility

module.exports = ({ env }) => [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", `${env("DO_SPACE_CDN")}`],
          "media-src": ["'self'", "data:", "blob:", `${env("DO_SPACE_CDN")}`],
          upgradeInsecureRequests: null,
        }
      }
    }
  },
];

have you find any other plugin

[sarang_kkl]

If somebody facing this issue please use cloudinary

[Amy_Li]

Hi,
just wondering where do you store these env variables (like DO_SPACE_ACCESS_KEY): in your .env file and commit this file to github as well? or store them in DigitalOcean platform inside App level or component level env…

Looking forward to your reply. Thanks in advance.

[mrt-stl]

Hi @Amy_Li ,
pushing .env files is considered a bad practice. I’m storing the env variables in the App-Level Environment Variables on DO.

[m90khan]

I am facing the same issue with video preview.

Using strapi-provider-upload-dos - npm this plugin.

Does anyone mange to solve this issue?

[thefrontend]

SOLVED:

Digital Ocean is using AWS S3 to store media, so there is no need to use the strapi-provider-upload-do plugin. Instead, install the official @strapi/provider-upload-aws-s3 plugin and configure your plugins.js file like this.

This also enables the uploadStream option with is needed if you want to change e.g. the default Strapi Logo.

upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        accessKeyId: env('DO_SPACE_ACCESS_KEY'),
        secretAccessKey: env('DO_SPACE_SECRET_KEY'),
        endpoint: env('DO_SPACE_ENDPOINT'),
        params: {
          Bucket: env('DO_SPACE_BUCKET'),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },

Then update your middleware.js, too

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*.digitaloceanspaces.com',
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*.digitaloceanspaces.com',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

And finally, to enable video preview you need to configure CORS at your DigitalOcean account at your space. Simply click on “add” and enter “*” for Origin.

[m90khan]

Thanks. but the video preview did not work.

1. I cannot select this option inside content manager when selecting media. so had to duplicated video.
2. Clicking on edit button does not show preview.

It seems that the URL is stripped. its starts with fra.digitaloceanspaces.com instead of https://fra.digitaloceanspaces.com.
The images are starting with https but the video URL not.

[m90khan]

@Bipolab : Did you manage to solve the issue ?

[thefrontend]

Did you check your console log errors where the video preview wasn’t shown?

[m90khan]

Unfortunately, there are no errors.

[Fabian_Clemenz]

I tried your configuration. but it doesn’t upload anything. i have the env in app level environment vars and set CORS of the bucket to *

plugin.js

module.exports = ({env}) => ({
    upload: {
        config: {
            provider: 'aws-s3',
            providerOptions: {
                accessKeyId: env('DO_SPACE_ACCESS_KEY'),
                secretAccessKey: env('DO_SPACE_SECRET_KEY'),
                endpoint: env('DO_SPACE_ENDPOINT'),
                params: {
                    Bucket: env('DO_SPACE_BUCKET'),
                },
            },
            actionOptions: {
                upload: {},
                uploadStream: {},
                delete: {},
            },
        },
    },
})

middleware.js

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*.digitaloceanspaces.com',
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*.digitaloceanspaces.com',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

it still uploads everything in the upload folder and not in our DO space. What did i get wrong?

[Eventyret]

@Fabian_Clemenz

accessKeyId

Why are you using the S3 provider for Digital Ocean