I have some issues to upload media in the Strapi v4 media library. It throw an error 500 in production.

I followed the strapi documentation and added the @strapi/provider-upload-cloudinary package.

Then updated the plugins.js file and middleware.js security :

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        delete: {},
      },
    },
  },
});




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

The detailed error :

main.9f63099e.js:7459 Uncaught (in promise)
mt
code
:
“ERR_BAD_RESPONSE”

config
:

adapter
:
(2) [‘xhr’, ‘http’]

baseURL
:
“https://admin.heritagefrance.fr”

cancelToken
:
Ti {promise: Promise, _listeners: Array(0)}

data
:
FormData {}

env
:
{FormData: ƒ, Blob: ƒ}

headers
:
yi {Accept: ‘application/json’, Content-Type: false, Authorization: ‘Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZC…0MzB9.N8nI637YevxHT7FCqgMPtxk3_wFhovQ_uQp6L_oUb1Q’}

maxBodyLength
:

maxContentLength
:

method
:
“post”

onUploadProgress
:
ƒ onUploadProgress({total:Yr,loaded:Kr})

paramsSerializer
:
{serialize: ƒ}

signal
:
AbortSignal {aborted: false, reason: undefined, onabort: null}

timeout
:
0

transformRequest
:
[ƒ]

transformResponse
:
[ƒ]

transitional
:
{silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}

url
:
“/upload”

validateStatus
:
ƒ (vn)

xsrfCookieName
:
“XSRF-TOKEN”

xsrfHeaderName
:
“X-XSRF-TOKEN”

[[Prototype]]
:
Object
message
:
“Request failed with status code 500”

name
:
“AxiosError”
request

:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

response
:

config
:
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}

data
:
{data: null, error: {…}}

headers
:
yi
access-control-allow-credentials
:
“true”
access-control-allow-methods
:
“PUT, GET, HEAD, POST, DELETE, OPTIONS”
access-control-allow-origin
:
“*”
content-length
:
“99”
content-security-policy
:
“connect-src ‘self’ https:;img-src ‘self’ data: blob: res.cloudinary.com;media-src ‘self’ data: blob: res.cloudinary.com;default-src ‘self’;base-uri ‘self’;font-src ‘self’ https: data:;form-action ‘self’;frame-ancestors ‘self’;object-src ‘none’;script-src ‘self’;script-src-attr ‘none’;style-src ‘self’ https: ‘unsafe-inline'”
content-type
:
“application/json; charset=utf-8”
date
:
“Tue, 04 Jun 2024 09:38:54 GMT”
referrer-policy
:
“no-referrer”
server
:
“nginx/1.18.0 (Ubuntu)”
strict-transport-security
:
“max-age=31536000; includeSubDomains”
vary
:
“Origin”
x-content-type-options
:
“nosniff”
x-dns-prefetch-control
:
“off”
x-download-options
:
“noopen”
x-frame-options
:
“SAMEORIGIN”
x-permitted-cross-domain-policies
:
“none”

[[Prototype]]
:
Object
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
:
500
statusText
:
“”
[[Prototype]]
:
Object
stack
:
“AxiosError: Request failed with status code 500n at Ln (https://admin.heritagefrance.fr/admin/main.9f63099e.js:7459:1144)n at XMLHttpRequest.Bn (https://admin.heritagefrance.fr/admin/main.9f63099e.js:7459:4709)”
[[Prototype]]
:
Error