Question

Strapi Provider Upload DO - MIME Compatibility

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


Submit an answer

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!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

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!

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)