[Bug]: Strapi Provider Upload documentation update for 4.0.0

[atlmtw]

Link to the documentation page or resource

https://docs.strapi.io/developer-docs/latest/plugins/upload.html#using-a-provider

Describe the bug

After the 4.0.0 update, it appears there's a mismatch in documentation on the site as opposed to one of the readmes I located about the aws s3 uploader.

in the ./config/plugins.js
it should be:

upload: { config: { provider: } }

Currently in the documentation it does not include config. Also I think the provider name system needs to be updated. According to the plugin source code https://github.com/strapi/strapi/blob/master/packages/core/upload/server/bootstrap.js

Its looking for @strapi/provider-upload-{name} instead of strapi-provider-upload-{name}

Additional context

No response

Suggested improvements or fixes

No response

Related issue(s)/PR(s)

No response

[hrdunn]

@atlmtw Sorry I'm a little confused, are you saying an example of the S3 provider should look like this

  module.exports = ({ env }) => ({
    // ...
    upload: {
     config:{
      provider: 'aws-s3',
      providerOptions: {
        accessKeyId: env('AWS_ACCESS_KEY_ID'),
        secretAccessKey: env('AWS_ACCESS_SECRET'),
        region: env('AWS_REGION'),
        params: {
          Bucket: env('AWS_BUCKET'),
        },
      },
    }
}
    // ...
  });
  

[atlmtw]

Yep! While scouring through Strapi's repo I saw an updated readme for the aws provider and it did this. And it worked for me too.

[hrdunn]

@atlmtw awesome thank you, I can confirm that is how the docs should be written as well to make S3 Upload work. Not sure of the process to get that added.

I did run into another issue of the image not being displayed on the backend once uploaded, did you encounter that as well? On my bucket, everything is set to public and I can view the image if I open the link but I get the following console error when viewing it on Strapi.

Refused to load the image 'https:/BUCKET_NAME.s3.amazonaws.com/image.jpg?updated_at=2021-12-02T22:29:14.084Z' because it violates the following Content Security Policy directive: "img-src 'self' data: blob:".

As I'm about to start a project I'm probably going to just use Strapi 3.6.8 and upgrade it once we get a little further into 4.x

[atlmtw]

Yeah I ran into that too. You have to change the CSP for Strapi.

This how my middleware.js looks under .config

module.exports = ({env}) => [
'strapi::errors',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'script-src': ["'self'", "'unsafe-inline'", 'cdn.jsdelivr.net'],
'img-src': ["'self'", 'data:', 'cdn.jsdelivr.net', 'strapi.io', ${env('AWS_CLOUDFRONT_URL')} ,${env('AWS_BUCKET')}.s3.${env('AWS_REGION')}.amazonaws.com],
'media-src': ["'self'", 'data:', 'cdn.jsdelivr.net', 'strapi.io', ${env('AWS_CLOUDFRONT_URL')} ,${env('AWS_BUCKET')}.s3.${env('AWS_REGION')}.amazonaws.com],
},
}
},
},
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::favicon',
'strapi::public',
];

Sorry for the formatting, but you are basically overriding the strapi default security middleware

[hrdunn]

@atlmtw that makes sense. Since I was just using the S3 bucket my img-src directive was

'img-src': ["'self'", 'data:', 'cdn.jsdelivr.net', 'strapi.io', `${env('AWS_BUCKET_NAME')}.s3.amazonaws.com`],

Thanks again!!!

[derrickmehaffy]

fixed in #536