BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

File drag-and-drop upload

Open justicecurcian opened this issue 1 year ago • 2 comments

Is your feature request related to a problem? Please describe. I want to build an extension to drop files in the editor (images/videos/pdf), upload them to my server and create a block where the file was dropped. There is no way of doing this on the blocknote level as i can see, tiptap extension with this functionality is behind a paywall, and doing this in prosemirror is kinda tricky: you need to replace dropcursor with the new block, and so you need a specific dropcursor for files because dropcursor works inside blocks too.

Describe the solution you'd like It would be perfect is there was a file drop plugin in blocknote that would handle the file drop itself and the editor would accept a function like

{ // BlockNoteEditorOptions
    fileDropHandler: (file: File) => {
        // User creates the node he needs, or a notification that
        // the editor can't handle a file of that type, handles upload, etc.
    }
}

Describe alternatives you've considered enableBlockNoteExtensions is kinda useless right now and to make it useful it needs to disable specific extensions. If I can disable dropcursor extension without disabling all other extensions, I will be able to create my own tiptap extension that will handle dropcursor and file upload.

justicecurcian avatar Apr 29 '24 06:04 justicecurcian

I just remembered that blocks have dropcursor only between blocks, but from what i can see block drag-and-drop is tied to sidemenu drag and drop, so i don't see how can i create a workaround.

justicecurcian avatar Apr 29 '24 08:04 justicecurcian

Hi! Would welcome a PR that makes enableBlockNoteExtensions more useful for your scenario. Meanwhile, we'll also be working on better file uploads so that might also address your requirements

YousefED avatar May 01 '24 11:05 YousefED