Video preview not working when using strapi with digitalocean spaces

System Information
  • Strapi Version: 4.1.1
  • Operating System: windows
  • Database: pg
  • Node Version: 16.14.0
  • NPM Version: 8.5.5
  • Yarn Version:

I hosted Strapi on digital ocean and used spaces for storage. I used the strapi-provider-upload-dos package and did all the settings mentioned in the plugins and middleware. I have also added CORS origin * on digitalocean spaces.

The image preview is working BUT the video previews are not working in Strapi admin because the URL for the videos starts without https://. I cannot choose the video from the library.

but this is only happening when using digital ocean spaces. I have read many threads where people had similar issues but with other hosts.

Here’s my config (under ./config/plugins.js):

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "strapi-provider-upload-dos",
      providerOptions: {
        key: env("DO_SPACE_ACCESS_KEY"),
        secret: env("DO_SPACE_SECRET_KEY"),
        endpoint: env("DO_SPACE_ENDPOINT"),
        space: env("DO_SPACE_BUCKET"),
        directory: env("DO_SPACE_DIRECTORY"),
        cdn: env("DO_SPACE_CDN"),
      },
    },
  },
});

Here’s my config (under ./config/middlewares.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",
];

- Video URL is not prefixed with https:// and has no width and height. The uploaded video size is above 50MB.

- JSON

   "media": {
            "data": {
              "id": 1,
              "attributes": {
                "name": "video.mp4",
                "alternativeText": "video.mp4",
                "caption": "video.mp4",
                "width": null,
                "height": null,
                "formats": null,
                "hash": "402e10034f616064bd8ed78077de0298",
                "ext": ".mp4",
                "mime": "video/mp4",
                "size": 49245.55,
                "url": "fra1.digitaloceanspaces.com/bucket/bucket/402e1003bd8ed78077de0298.mp4",
                "previewUrl": null,
                "provider": "strapi-provider-upload-dos",
                "provider_metadata": null,
                "createdAt": "2022-08-31T11:01:22.730Z",
                "updatedAt": "2022-08-31T11:01:22.730Z"
              }
            }
          }

Hey @m90khan facing the same issue, did you find any solution?
Thanks :slight_smile:

I found a solution that’s i put on my frontend something like this src={`https://${header.video}`}
it resolve the source url for me i hope it help

Hello @m90khan,
A fix will be released soon on Strapi. I made a pull request for this.
An issue is open on the AWS SDK repository because the protocol is missing in the url provided during a file upload in particular cases.

@NalessoAxel as the fix is to add the string https://, the fixed version of Strapi may break your code.

@NalessoAxel : sorry for the delay. Unfortunately not, I talked on discord with the strapi support back then and they opened the issue with AWS which is still pending.
Btw, you should also check on videos that are less than 21MB. they will have https:// while >21MB will not. so check on the URL string if its prefixed or not.

@Nathan_Pichon Thanks. I have moved my instance to my own server as we have to hand over backend to the client.Really hoping to get this fixed soon so I can fix the rest of my two instances :slight_smile:

@Nathan_Pichon : it’s just a temporary fix as i’ve to move forward in my project. When a new version of strapi with the fix you made, i will change my code. Thanks for your reply and work btw :slight_smile:

@m90khan : Thanks for your reply, will check thanks :slight_smile:

1 Like

Hey @m90khan there is a fix for this in the new version of strapi see here —> Upload media to digitalocean spaces using strapi v4 - #39 by Shaun_Brown
i don’t try yet but it look like it’s working