grapesjs: BUG: Cannot read properties of undefined (reading 'uploadFile')
GrapesJS version
- 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?
- 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
- I agree to follow this project’s Code of Conduct
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 16 (4 by maintainers)
@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.
@markovic-nikola This Is REALLY IMPORTANT. SUPER THANKS. 😄
pointer-events: none;
is not working for me, I literally have to restart the whole browser in order to make it working normally again.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: