Media uploading Error using Digital Ocean

[GiuseppeStillitano]

Bug report

Required System information

• Node.js version: 18.19.0
• NPM version: yarn/1.22.21
• Strapi version: 4.20.0
• Database: postgres
• Operating system: linux
• Is your project Javascript or Typescript: typescript

Describe the bug

Everything was working fine until my last strapi upgrade. Now the issue:

When I try to upload a new image to my CMS in production, I receive a loading error ("An error occurred while uploading the file.")

Here is my confit/plugin.js

// ...
upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        credentials: {
          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: {},
      },
    },
  },

Here is my confit/middlewares.js

{
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            '*.digitaloceanspaces.com',
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            '*.digitaloceanspaces.com',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },

Steps to reproduce the behavior

1. Upload new media
2. Media uploading error

Screenshots

[cjrcooper]

Hi @GiuseppeStillitano

I ran into this same issue yesterday after upgrading one of my sites. When I switched from the strapi-provider-upload-do provider to the aws-s3 provider in the plugins.js file.

After some digging I managed to solve it by adding in the region value into the plugins module.

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'),
        region: env('DO_SPACE_REGION'), // <--- Add your DigitalOcean Space region here
        params: {
          Bucket: env('DO_SPACE_BUCKET'),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

Which in your case looks to be fra1

I hope this works for you.

[GiuseppeStillitano]

Hi @cjrcooper, thank you for your response.

I tried adding the region in the plugin module as you suggested, but I'm still receiving the same error.

Are you using Spaces Object Storage on Digital Ocean?

[cjrcooper]

@GiuseppeStillitano yes I am.

For reference this is my middleware.js file with the contentSecurityPolicy. Perhaps it's something in here that you're missing?

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',
];

[Kohila]

@GiuseppeStillitano Per dependency updates made to the @strapi/provider-upload-aws-s3 package, you'll want to wrap your provider configuration in an s3Options{} object.

Your full upload{} config should look something like this:

upload: {
  config: {
    provider: "aws-s3",
    providerOptions: {
      s3Options: {
        endpoint: env("UPLOAD_ENDPOINT", 'https://nyc3.digitaloceanspaces.com'),
        region: env("UPLOAD_REGION", "nyc3"),
        credentials: {
          accessKeyId: env("UPLOAD_ACCESS_KEY"),
          secretAccessKey: env("UPLOAD_SECRET_KEY"),
        },
        params: {
          Bucket: env("UPLOAD_BUCKET"),
        },
      },
    },
  },
},
// ...

Additionally, @cjrcooper is correct; you'll also need to make sure to add the endpoint to your CSP config.

[alexandrebodin]

Hi, it looks like the suggestions gave you the right config :) I'll go ahead and closed this one