File Handler

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.

#Installation

Once done, you can install the extension from our private registry:

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

#Usage