BUG: When drag and drop block into editor in Chrome, not able to drag and drop block

[sridhar391]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 97.0.4692.71 (Official Build) (64-bit)

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Drag and drop the basic blocks in the editor

What is the expected behavior?

1. Drag and drop the basic blocks in the editor and it should be shown in the editor

What is the current behavior?
Drag and drop the basic blocks in editor, not able to drag and drop block

In our project also, while Drag and dropping the basic blocks in the editor, not able to drag and drop the block

The Drag and Drop of the basic blocks in the editor working correctly in the firefox browser

GrapesJS-Demo---Free-Open-Source-Website-Page-Builder.mp4

Code of Conduct

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

[artf]

I see no issues on my side (latest Chrome version).

[sridhar391]

@artf We are using the Ubuntu OS with the latest version of chrome browser, please give us an example on how to debug for the drag and drop functionality and please tell us if there is any callback function called while drag and drop block

[Vac1911]

I am also using ubuntu + chrome and getting the same issue on the demo, the examples in the docs and a locally installed version. Here is a the error message I am getting:

backbone.js:370 TypeError: Cannot read properties of undefined (reading 'uploadFile')
    at r.fetchFile (ComponentImageView.js:31)
    at r.initialize (ComponentImageView.js:19)
    at r.e.View (backbone.js:1224)
    at r [as constructor] (backbone.js:1884)
    at r [as constructor] (backbone.js:1884)
    at new r (backbone.js:1884)
    at r.addToCollection (ComponentsView.js:77)
    at ComponentsView.js:131
    at Module._e (each.js:14)
    at r.each (backbone.js:87) {level: 'error'}

Note: no matter which block I drop in the error is the same

https://github.com/artf/grapesjs/blob/30bb15b71db1b38efadef8500fb70c80821a1dd3/src/dom_components/view/ComponentImageView.js#L32

[Vac1911]

this also occurs in v0.17.29

[Vac1911]

Firefox works fine thou as a temporary work around

[artf]

@Vac1911 the issue you're mentioning I'm able to reproduce if I try to D&D an image from the desktop. That thing I'm able to fix, but I see no issue with blocks, and from @sridhar391 video, it doesn't even throw errors. So, my guess, it might be something related to your Ubuntu/Chrome configuration (related to the native D&D).

For now, I'll close this via ComponentImageView fix as I'm not able to reproduce it and will see if anybody is able to provide more details.

[sridhar391]

@artf We improvised the Drag and Drop in our project and the consoler error thrown, please refer to the attached video
We also tried to Drag and Drop in our project and the consoler error thrown

restya-core-d.d-issue.mp4

[artf]

@sridhar391 that issue should not happen in the latest release. What the video shows, seems almost like the issue from the previous version, so please check your grapesjs is updated or create a reproducible demo, please.

[ahmafi]

I have the same issue.

Google Chrome Version 102.0.5005.115 (Official Build) (64-bit)