FileHandler extension
Have you ever wanted to drag and drop or paste files into your editor? Well, we did too—so here’s an extension for that.
The FileHandler
extension allows you to easily handle file drops and pastes in the editor. You can define custom handlers for both events & manage allowed file types.
No Server Functionality
This extension is only responsible for handling files in your editor. It doesn’t display them, for that you can integrate the image extension
Install
Set up access to Tiptap's private repository
Integrate this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.
npm install @tiptap-pro/extension-file-handler
Settings
onPaste
The callback function that will be called when a file is pasted into the editor. You will have access to the editor instance & the files pasted.
Default: undefined
FileHandler.configure({
onPaste: (editor, files, htmlContent) => {
// do something with the files
// and insert the file into the editor
// in some cases (for example copy / pasted gifs from other apps) you should probably not use the file directly
// as the file parser will only have a single gif frame as png
// in this case, you can extract the url from the htmlContent and use it instead, let other inputRules handle insertion
// or do anything else with the htmlContent pasted into here
},
})
onDrop
The callback function that will be called when a file is dropped into the editor. You will have access to the editor instance, the files dropped and the position the file was dropped at.
Default: undefined
FileHandler.configure({
onDrop: (editor, files, pos) => {
// do something with the files
// and insert the file into the editor
},
})
allowedMimeTypes
This option controls which file types are allowed to be dropped or pasted into the editor. You can define a list of mime types or a list of file extensions. If no mime types or file extensions are defined, all files will be allowed.
Default: undefined
FileHandler.configure({
allowedMimeTypes: ['image/jpeg', 'image/png', 'image/gif'],
})