Strapi media library image url broken by Digital Ocean - file-upload

Question

I am trying to upload an image to Digital Ocean Storage. it's upload in DO but after callback strapi generate wrong URL
for Example: https://https//jobsflow/d0e989a489bdc380c55e5846076d07f8.png?updated_at=2022-06-08T17:00:32.934Z thats mean https://https//.
//jobsflow is my location of storage.
here is my config/plugins.js code
module.exports = {
upload: {
config: {
provider: "strapi-provider-upload-dos",
providerOptions: {
key: process.env.DO_SPACE_ACCESS_KEY,
secret: process.env.DO_SPACE_SECRET_KEY,
endpoint: process.env.DO_SPACE_ENDPOINT,
space: process.env.DO_SPACE_BUCKET,
directory: process.env.DO_SPACE_DIRECTORY,
cdn: process.env.DO_SPACE_CDN,
},
},
},
};
//here is my config/middleware.js
module.exports = [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"*.digitaloceanspaces.com"
],
"media-src": ["'self'", "data:", "blob:"],
upgradeInsecureRequests: null,
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::favicon",
"strapi::public",
];
please help me..! if you have any idea

Answer 1

Are you using a custom upload provider for this?
Why not use the official #strapi/provider-upload-aws-s3 plugin?
// path config/plugins.js
...
upload: {
config: {
provider: 'aws-s3',
providerOptions: {
accessKeyId: env('DO_ACCESS_KEY_ID'),
secretAccessKey: env('DO_ACCESS_SECRET'),
region: env('DO_REGION'),
endpoint: env('DO_ENDPOINT'),
params: {
Bucket: env('DO_BUCKET'),
}
},
},
},
Another nice trick to change the URL of an image and point it to your CDN is adding this:
// src/index.js
async bootstrap({strapi}){
strapi.db.lifecycles.subscribe({
models: ['plugin::upload.file'],
// use cdn url instead of space origin
async beforeCreate(data) {
data.params.data.url = data.params.data.url.replace(__ORIGINAL_URL__, __CDN_URL__)
// you can even do more here like setting policies for the object you're uploading
},
});
}