Upload media to digitalocean spaces using strapi v4

Bipolab · March 21, 2022, 1:12pm

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

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

mrt-stl · March 21, 2022, 1:39pm

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 · March 21, 2022, 1:54pm

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 · April 4, 2022, 2:02pm

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 · June 10, 2022, 3:52am

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 · June 13, 2022, 11:52am

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 · June 14, 2022, 2:23am

If somebody facing this issue please use cloudinary

Amy_Li · July 23, 2022, 2:46am

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 · July 25, 2022, 11:28am

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 · August 17, 2022, 7:34am

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 · August 23, 2022, 8:33am

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 · August 25, 2022, 2:03pm

Thanks. but the video preview did not work.

I cannot select this option inside content manager when selecting media. so had to duplicated video.
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 · August 25, 2022, 2:04pm

@Bipolab : Did you manage to solve the issue ?

thefrontend · August 26, 2022, 9:55pm

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

m90khan · August 29, 2022, 5:17am

Unfortunately, there are no errors.

Fabian_Clemenz · September 2, 2022, 9:43am

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 · September 2, 2022, 10:03am

Why are you using the S3 provider for Digital Ocean

Fabian_Clemenz · September 2, 2022, 10:05am

because thefrontend mentioned that it is possible. and in the docs is clearly stated, that one can use it with s3 compatible services

thefrontend · September 2, 2022, 10:12am

Did you get any error in your server logs? Does the upload folder show preview images?

Fabian_Clemenz · September 2, 2022, 10:17am

no errors - i get preview images and everything is located in the /upload/ folder