Handle image drop from file system

1

Hi.

I am trying to implement the feature of droping the file from filesystem into prosemirror, upload it, and show in the editor.

I am trying to do it via handleDrop: ?⁠fn(view: EditorView, event: dom.Event, slice: Slice, moved: bool) → bool,

The problem is, that it catches only drops of elements, which are already inside prosemirror view. https://github.com/ProseMirror/prosemirror-view/blob/master/src/input.js#L507 - the return on this line skips “external” drop events.

So, I suppose, I am trying to implement this in wrong way. What other options do I have?

Thanks.

2

You can use handleDOMEvents to handle the raw drop event, look for files that you can handle, and if you find any, prevent the event’s default and generate the proper transaction that inserts something into the document.

1 Like
3

Thanks! Worked perfectly.