How to link properly google cloud platform (buckets) to display images in strapi admin

Questions and Answers
1
  • Strapi 4.5.1
  • Debian 11:
  • Mysql 8.0:
  • 16.18.1:
  • npm 9.2:

I am trying to save my media in google cloud platform buckets (also deployed in a GCP vm). I am following the docs but i am still getting error.

Error
Error1177×670 85.5 KB

This is my plugins.js

module.exports = {
    upload: {
      config: {
        provider: '@strapi-community/strapi-provider-upload-google-cloud-storage',
        providerOptions: {
            bucketName: 'bucketname',
            publicFiles: true,
            uniform: true,
            baseUrl: 'https://storage.googleapis.com/bucketname',
            basePath: '',
        },
      },
    },
}

Here is my middlewares.js

module.exports = [
  'strapi::errors',
{
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
...

THANKS!

2

Hi @andercm have you tried adding https://storage.googleapis.com? Maybe this could work

1 Like
3

can you please check if you deleted the line ‘strapi::security’ from middlewares.js. (that was my noob mistake)

1 Like
4

Yes, I replaced the default ‘strapi::secuirity’ for this.
This how i have the middleware ( I tried adding https:…/bucket)

image
image1047×521 35.2 KB

5

I know it’s a little bit late but, removing baseUrl from upload config in plugins.js will give you the correct url, also publicFiles should be false

6

hi @andercm
did you solve it? thanks

9

For anyone using Strapi 5 although this should apply to 4 also, install the plugin @strapi-community/strapi-provider-upload-google-cloud-storage. Add upload to your plugins:

 upload: {
      config: {
        provider: '@strapi-community/strapi-provider-upload-google-cloud-storage',
        providerOptions: {
          serviceAccount: env.json('GCS_SERVICE_ACCOUNT'),
          bucketName: env('GCS_BUCKET_NAME'),
          basePath: env('GCS_BASE_PATH'),
          baseUrl: env('GCS_BASE_URL'),
          publicFiles: env('GCS_PUBLIC_FILES'),
          uniform: env('GCS_UNIFORM'),
        },
      },
    },

for middleware.ts: Am using 3 storage providers, cloudinary and aws. You can skip those 2 and just add googleapis

export default [
  "strapi::logger",
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "script-src": [
            "'self'",
            "https:",
            "editor.unlayer.com",
            "https://cdn.ckeditor.com",
          ],
          "frame-src": [
            "'self'",
            "editor.unlayer.com",
            "https://cdn.ckeditor.com",
          ],
          "connect-src": [
            "'self'",
            "blob:",
            "s3.amazonaws.com",
            "*.storage.googleapis.com",
            "storage.googleapis.com",
          ],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "cdn.jsdelivr.net",
            "strapi.io",
            "s3.amazonaws.com",
            "res.cloudinary.com",
            "*.storage.googleapis.com",
            "storage.googleapis.com",
          ],
          "style-src": [
            "'self'",
            "'unsafe-inline'",
            "res.cloudinary.com",
            "*.storage.googleapis.com",
            "storage.googleapis.com",
            "https://cdn.ckeditor.com",
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "*.storage.googleapis.com",
            "storage.googleapis.com",
          ],
          "font-src": ["'self'"],
        },
        upgradeInsecureRequests: null,
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

That should upload to cloud although if you get a replication of filename, use generateUploadFileName from the library docs to generate a good name