Can't upload images in editor.

[DS-ON]

Bug report

Describe the bug

'Upload Image' button within Image content block is not working. Browser devtools show event listener as an empty function.

Steps to reproduce the behavior

1. Go to 'Content' tab
2. Drag 'Image' block in to editor
3. Click image to open 'Image' dialog and click 'Upload Image' button
4. Nothing happens

Expected behavior

The button should open a file browser or drag & drop file input.

Screenshots

Button event listener:

editor.js in sources panel showing Qr():

Code snippets

Strapi security middleware configured as per docs. Also set 'unsafe-inline' and CORS origin to '*' for troubleshooting purposes:

{
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "cdn.jsdelivr.net",
            "strapi.io",
            "s3.amazonaws.com",
          ],
          "media-src": ["'self'", "data:", "blob:", "market-assets.strapi.io"],
          "script-src": [
            "'self'",
            "'unsafe-inline'",
            "editor.unlayer.com",
            "editor.unlayer.com/embed.js",
          ],
          "frame-src": ["'self'", "editor.unlayer.com"],
        },
      },
    },
  },
  {
    name: "strapi::cors",
    config: {
      headers: [
        "Content-Type",
        "Authorization",
        "Accept",
        "Origin",
        "Cache-Control",
        "Pragma",
      ],
      origin: "*",
      methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      credentials: true,
    },
  },

System

• Node.js version: 18.17.0
• NPM version: 9.6.7
• Strapi version: 4.21.1
• Plugin version: 2.2.1
• Database: postgres
• Operating system: Pop!_OS 22.04 LTS

[github-actions]

Thank you!! This is your first issue on this repo

[LukeHouben]

I came here to report this issue, but I see it has been happening already for a longer period of time.

Does anybody know a solution? Seems to be an Event handler issue, when adding an OnClick to the button to activate the input that's inside the button tag, I can upload an image and it gets selected.

[JeffreyArts]

I noticed a CORS error;
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.tools.unlayer.com/v1/image?

Does this mean that the answer is simply, "nope, can't do anything about that". Or do I need to have an unlayer account to resolve this issue?

Or are the templates stored somewhere within the codebase, so I could replace them in the code?

[creazy231]

have you tried to edit the strapi:security settings like here: https://github.com/alexzaganelli/strapi-plugin-email-designer?tab=readme-ov-file#-installation ?

[JeffreyArts]

@creazy231, personally I have copy-pasted the configuration settings from the readme page and replaced my existing "strapi::security" string in config/middleware.ts as followed:

    {
        name: "strapi::security",
        config: {
            contentSecurityPolicy: {
                directives: {
                    "script-src": ["'self'", "editor.unlayer.com"],
                    "frame-src": ["'self'", "editor.unlayer.com"],
                    "img-src": [
                        "'self'",
                        "data:",
                        "cdn.jsdelivr.net",
                        "strapi.io",
                        "s3.amazonaws.com",
                    ],
                },
            },
        },
    },

ps. I don't see how the local configuration would affect the server configuration of unlayer.

[creazy231]

It's not about unlayer, it's about strapi backend require same origin if not enabled in strapi::security

so you could try to add the following:

    {
        name: "strapi::security",
        config: {
            contentSecurityPolicy: {
                directives: {
                    "script-src": ["'self'", "editor.unlayer.com"],
                    "frame-src": ["'self'", "editor.unlayer.com"],
                    "img-src": [
                        "'self'",
                        "data:",
                        "cdn.jsdelivr.net",
                        "strapi.io",
                        "s3.amazonaws.com",
                        "api.tools.unlayer.com",
                    ],
                },
            },
        },
    },

[JeffreyArts]

Hi @creazy231,

Thank you for the quick reply;

I have added the strapi.io value to the img-src array, which made no difference. I have also tried to add localhost:1337 (since this is where I run the Stapi app from) but that did not work neither.

Perhaps unrelated (perhaps not). But I do get another CORS error. This one shows up (twice) when I just refresh the template editing page (/admin/plugins/email-designer/core/user-address-confirmation). Most likely this should be reported as its own issue, but I thought I would share it nonetheless, since it might provide some valuable additional context.

EvalError: call to eval() blocked by CSP
Content-Security-Policy: The page’s settings blocked a JavaScript eval (script-src) from being executed because it violates the following directive: “script-src 'self' http://editor.unlayer.com/ 'self' 'unsafe-inline'” (Missing 'unsafe-eval')

[creazy231]

    {
        name: "strapi::security",
        config: {
            contentSecurityPolicy: {
                directives: {
                    "script-src": ["'self'", "'unsafe-eval'", "editor.unlayer.com"],
                    "frame-src": ["'self'", "editor.unlayer.com"],
                    "img-src": [
                        "'self'",
                        "data:",
                        "cdn.jsdelivr.net",
                        "strapi.io",
                        "s3.amazonaws.com",
                    ],
                },
            },
        },
    },

should fix your last error, but can you tell what api.tools.unlayer.com tries to load? An image or js or something?

[JeffreyArts]

Both of your solutions seem to have helped. The CORS error I was getting, was caused by modifying the image. That is now gone. I have also tried to generate an AI image, which also works. So 2 out of 3 are working now, which is great. But which is not what the original issue is about.

The original issue is about the upload image button not working. Just like the original author of this issue, nothing happens when I click on the upload image button. No error message, nothing. This occurs to me on a fresh installation of Strapi 4, and following the steps as described in the Readme

Screen recording:
https://youtu.be/y05W0MeamY0

In order to replicate, please follow the following steps

Install strapi + strapi-plugin-email-designer

$ yarn create strapi-app my-project
> QuickStart

> Skip

$ yarn add strapi-plugin-email-designer@latest


Update config/middleware.js

module.exports = [
  'strapi::logger',
  'strapi::errors',
 {
     name: "strapi::security",
     config: {
       contentSecurityPolicy: {
         directives: {
           "script-src": ["'self'", "editor.unlayer.com"],
           "frame-src": ["'self'", "editor.unlayer.com"],
           "img-src": [
             "'self'",
             "data:",
             "cdn.jsdelivr.net",
             "strapi.io",
             "s3.amazonaws.com",
           ],
         },
       },
     },
   },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Run yarn develop to start strapi project, navigate to http://localhost:1337/admin/plugins/email-designer/core/user-address-confirmation (create user account, and then navigate to that url). Drag and drop image element into the body, and click on the upload image button