Hello! I am using DO Space with the “strapi-provider-upload-do” provider to save my media files. Everything is saved correctly in Spaces, but I am having the following problems and I don’t know if it is a problem with the provider of Strapi, or directly with Strapi. The first problem I encountered was that the media library didn’t show a preview of the images, so doing some research, I realized that strapi’s middlewares.js file needs to be configured as follows:
module.exports = ({ env }) => [
'strapi::errors',
'strapi::security',
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": ["'self'", "data:", "blob:", `${env("DO_SPACE_CDN")}`],
"media-src": ["'self'", "data:", "blob:", `${env("DO_SPACE_CDN")}`],
upgradeInsecureRequests: null,
}
}
}
},
];
When you do this, the images are previewed in the media library, but not the videos. When I try to preview a video I get the following message: No video found that has a supported format and MIME type. I have spent days trying to find a solution but there is no way, so if someone can help me, I would be very grateful.
I´m using Strapi 4.1.3
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Take a look at your web console and see if it’s a CORS policy issue. That’s what it was for me. You have to add a CORS config for Strapi. Note, that Strapi 4 handles this differently than the previous versions.
You need to update the middleware.js file (config/middlewares.js)
module.exports = [ … { name: ‘strapi::cors’, config: { enabled: true, header: ‘*’, origin: [‘http://localhost:8080’] } } … ];
** take note that you have to add the port on localhost.
(Found solution on Stackoverflow: https://stackoverflow.com/questions/70639958/strapi-v4-throwing-cors-exception)
Try this:
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",
];
(Found here: https://github.com/derrickmehaffy/strapi-provider-upload-do)
Also, I apologize, I provided a solution earlier that was an older solution I had found that didn’t work. I don’t see that answer though, so maybe it didn’t go through!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.