FileHandler extension

You ever wanted to drag and drop or paste files into your editor? Well we too - so here is 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.

Install

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'],
})