Approach to drag and drop uploading of images?

[fdemian]

Hello, there.
I'm trying to implement a file drag and drop upload functionality (specifically for images in my case) in lexical, but I'm not sure what is the best way to do this.
The code I have so far feels a bit hack-ish.

  const scrollRef = useRef(null);
  const [editorRef, setEditorRef] = useState(null);
  const dropFn = async (event) => {
    event.preventDefault();
    const files = event.target.files || event.dataTransfer.files;

    const reader = new FileReader();
    reader.onload = function () {
      if (typeof reader.result === 'string') {
        const img = { altText: "asdf", data: reader.result };
        console.clear();
        console.log(reader.result);
        editorRef.dispatchCommand(INSERT_IMAGE_COMMAND, {
           altText: "",
           src: reader.result
         });
      }
      return '';
     };

     reader.readAsDataURL(files[0]);
  };

  <div
        className="editor-container"
        draggable={true}
        onDrop={dropFn}
        ref={scrollRef}>
       <RefPlugin setEditorRef={setEditorRef} />
 </div>

Since I need the editor ref in order to dispatch the insert image command I'm using a "Plugin" that serves to set the editor instance reference.

Is there a better way to accomplish what I'm trying to do here?

[zurfyx]

The approach you listed looks reasonable to me, we plan to work on drag & drop support for text, images and similar but it's still on the todo list (https://github.com/facebook/lexical/issues?q=is%3Aissue+drag).

Lexical currently offers a command to handle the drop event -> DROP_COMMAND. You can potentially registerCommandListener this command and handle the event there. The rest would be the same!