BUG: Cannot read properties of undefined (reading 'uploadFile')

[throne1986]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v96.0.4664.45

Reproducible demo link

https://codesandbox.io/s/react-redux-toolkit-application-forked-l5rhp?file=/src/pages/Editor.js

Describe the bug

How to reproduce the bug?

1. Just drag and drop the logo to canvas you should get the error

What is the expected behavior? Drag and drop the logo to canvas

What is the current behavior? I have created a simple custom plugin just a logo , now when I drag and drop to canvas I get the following error Cannot read properties of undefined (reading 'uploadFile')

If is necessary to execute some code in order to reproduce the bug, paste it here below:

import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import grapesjs from "grapesjs";
import block from "grapesjs-blocks-basic";

const Editor = () => {
  const [editor, setEditor] = useState();
  const dispatch = useDispatch();

  //custom logo plugin
  function pageLogo(editor) {
    editor.BlockManager.add("logo", {
      label: `<div className="gjs-block-label"><img src="https://i.ibb.co/nL2Q7WN/logo.png"></div>`,
      content: `<span><img src="https://i.ibb.co/nL2Q7WN/logo.png" /></span>`,
      category: {
        id: "logo",
        label: "Logo",
        open: true
      }
    });
  }

  useEffect(() => {
    const editor = grapesjs.init({
      container: "#editor",
      storageManager: false,
      blockManager: true,
      plugins: [pageLogo]
    });

    setEditor(editor);
  }, [dispatch]);

  return (
    <>
      <div className="ModalVideos"></div>
      <div id="editor"></div>
    </>
  );
};

export default Editor;

@artf What am I doing wrong here?

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[throne1986]

@artf I have tested with old versions below 22 everything is fine , but from version 25, 26, 27, 28, 29 there is this bug when u drag and drop a custom plugins which cotains an image , if you remove the image the error is gone ,

Please check this, thanks a lot brother

[jkntar]

I ran into this problem, too. It seemed to happen whenever I started dragging a block's media icon instead of the block text or block container. It seems that the issue was resolved by adding pointer-events: none; to each of my block's media image styles.

The image I'm talking about being dragged:

In my case:

editor.BlockManager.add('lx-button', {
    label: 'LiveX Button', 
    media: `<img style="width: 32px; height: 32px; filter: invert(0.75); pointer-events: none;" src='https://www.svgrepo.com/show/368574/button.svg' />`,
    category: 'LiveX',
    content: `
      <div class='lx-button normal'>View Details</div>
    `,
  })

[throne1986]

pointer-events: none;

Agreed that resolve the issue @artf is this the right aproach to this bug ?

[codingmachine16]

Hi guys, I am also having the same issue. Please share the solution for it . Thanks

[throne1986]

Hi guys, I am also having the same issue. Please share the solution for it . Thanks

Hii, I added pointer-events: none to my custom plugins to solve the issue but is this theright aproach? am not sure only @artf can confirm this

[markovic-nikola]

pointer-events: none; is not working for me, I literally have to restart the whole browser in order to make it working normally again.

[artf]

Yeah I'll actually fix that in the next release with the same approach https://github.com/artf/grapesjs/commit/828e64b235b835ce5a42d50ee8565e9f4da7839a

[luasenvy]

pointer-events: none; is not working for me, I literally have to restart the whole browser in order to make it working normally again.

@markovic-nikola This Is REALLY IMPORTANT. SUPER THANKS. :D

[MarksEliel]

I have the same problem https://prnt.sc/25uumtx

[luasenvy]

I have the same problem https://prnt.sc/25uumtx

In my case, reinstall grapesjs to 0.17.29 And, referenced This comment

[skru]

A rare use-case I know, but the pointer-events fix will not stop the bug if a user drags an image from their OS into the canvas.

I've just had to downgrade for now but this shouldn't be closed

[artf]

@skru there were actually more than one problem in this bug and the one you're mentioning was actually fixed here

[omergr8]

@artf I am still facing this issue. Getting same error whenever I tried to drag and drop image from my pc to canvas. Is there any temporary fix for this yet?

[artf]

@omergr8 I see no issues on the official demo, so if you believe the problem is still there, please open a new issue with a reproducible demo.

[luasenvy]

@artf I am still facing this issue. Getting same error whenever I tried to drag and drop image from my pc to canvas. Is there any temporary fix for this yet?

@omergr8 I think it's the same situation I've been through

literally have to restart the whole browser

What I wanted to emphasize is this. Even if you change the version, didn't solve it.

In my case, It was an ignorant way I restarted chrome every time I lowered the dependencies one by one. and i find working version. ( in current version of greapesjs. there is no need to consider )

so, I think this issue is related to not only CSS, but also browser functionality. the point here is, I restart whole chome process including the Chrome App.

literally whole browser. as @markovic-nikola said

how about try to install grapesjs latest version( now 0.18.2 ), clear page cache and restart chrome process?

If the error is the same, I think you need a different approach. :thinking:

[artf]

@luasenvy this is why I always ask for a reproducible demo because people do not realize they're running behind a cached file