Broken Image URLs in Media Library using DigitalOcean Spaces

Questions and Answers
, , ,
1
System Information
  • Strapi Version: 4.1.7
  • Operating System: MacOS (Local) / Ubuntu 18.04 (deployment)
  • Database: Postgres
  • Node Version: 14.19.1
  • NPM Version: 6.14.16
  • Yarn Version: 1.22.17
  • strapi-provider-upload-dos: ^4.0.5

Hi Strapi community!
I have been using Strapi since v3, recently switched to Strapi v4 for another production level application to support backend infrastructure. I have been facing an issue for a long time, and have looked into all the places for a solution for it.

Issue

When uploading an image file to Media Library which I have integrated with DOSpaces CDN, image previews are broken.

Media Asset Library Screenshot
Media Asset Library Screenshot798Ă—894 260 KB

I’ve tried editing Security Policies as suggested in many GitHub issues and posts on this forum as follows:

// ./config/middlewares.js
const MEDIA_URL = process.env.DO_SPACE_CDN; // CDN URL appended with "https://"

console.log(`MEDIA_URL: ${MEDIA_URL}`);

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

Looking for help

What am I doing wrong here? Am I missing something? Is this an issue with v4 of Strapi? because in v3 everything was working perfectly fine. I am willing to be active and help you with investigating on this, please help.

2

Try to write it like this:

`${process.env.DO_SPACE_CDN}`

In here

["'self'", "data:", "blob:", MEDIA_URL],

also is your upload point DO_SPACE_CDN or is this cdn endpoint?

1 Like
3

I have already tried doing that, but it does not work,
DO_SPACE_CDN is CDN url where everything is stored
URL is like: https://<myBucketName>.sgp1.digitaloceanspaces.com

4

then you need to add your URL

https://<myBucketName>.sgp1.digitaloceanspaces.com

as this is in your database from where strapi pulls info.
or you need to change image url in database to correspond to CDN

5

Hey @WardenCommander, thanks for the response, can you please point me from where do I change the media URL in strapi CMS database so that it always takes that URL?

Update: I have tried updating the URL in the db but Strapi is not pulling that URL at all from the db, broken URL is still https://https/<folderName>/<fileName>.<extension>
while in db I have updated it to https://<myBucketName>/.sgp1.digitaloceanspaces.com/<folderName>/<fileName>.<extension>

6

Yea, you cant change that easy, you would have to connect to database and query files and change it with database comnands.

My suggestion is to build custom plugin, as this is currently 1 of 2 ways to do what you want to do, im doing it at moment.

Step 1.
generate local custom plugin - find info in strapi doc how to do it and that plugin is called.
Step 2.
In that custom plugin go to folder “server” and inside you have bootstrap.js file paste this

'use strict';

module.exports = ({ strapi }) => {
  // bootstrap phase
  strapi.db.lifecycles.subscribe({
    models: ['plugin::upload.file'],

    // your lifecycle hooks

    //
    async beforeCreate(event) {
      const { params } = event;
      //console.log('new file created!', event)
      if(!!strapi.config.get('plugin.upload.providerOptions.baseUrl')){
        params.data.url="https://"+strapi.config.get('plugin.upload.providerOptions.baseUrl')+'/'+params.data.hash+params.data.ext
      }
    },
  })
};

Step3.
In config - >plugins.js or config->env->production->plugins.js for upload provider add baseUrl like I did and add for it add your CDN link

upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        accessKeyId: process.env.C1_backblaze_keyID,
        secretAccessKey: process.env.C2_backblaze_applicationKey,
        region: process.env.C3_backblaze_region,
        params: {
           Bucket: process.env.C4_backblaze_keyName,
         },
        endpoint:process.env.C5_endpoint, //workings
        baseUrl: process.env.C6_CDN,
      },
    },
  },

And now you should have your files urls over cdn

1 Like