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.

By default, the extension does not display the uploaded file when it is pasted or dropped. Instead, it triggers an event that you can respond to by inserting a new Node into the editor. For example, to display the uploaded image file, use the image extension.

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