This page is part of a static HTML representation of the TiddlyWiki at


 9th October 2021 at 12:22pm


The dropzone widget creates an area into which the user can drag files and other objects. It also supports pasting via the clipboard, although browser support is currently limited.

It sends a WidgetMessage: tm-import-tiddlers carrying a JSON representation of the tiddlers to be imported up through its parents. This message usually trapped by the NavigatorWidget which adds the tiddlers to the store and updates the story to display them.

Content and Attributes

deserializerIntroduced in v5.1.15 Optional name of deserializer to be used (by default the deserializer is derived from the file extension)
enableIntroduced in v5.1.22 Optional value "no" to disable the dropzone functionality (defaults to "yes")
classIntroduced in v5.1.22 Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone")
autoOpenOnImportIntroduced in v5.1.23 Optional value "no" or "yes" that can override tv-auto-open-on-import
importTitleIntroduced in v5.1.23 Optional tiddler title to use for import process instead of $:/Import
actionsIntroduced in v5.2.0 Optional actions string to be invoked after the tm-import-tiddlers message has been sent. The variable importTitle provides the title of the tiddler used for the import process.
contentTypesFilterIntroduced in v5.2.0 Optional filter that specifies the content types accepted by the dropzone.
filesOnlyIntroduced in v5.2.0 Optional. When set to "yes", the dropzone only accepts files and not string data. Defaults to "no"

Use the prefix filter operator to easily accept multiple related content types. For example this filter will accept all image content types: [prefix[image/]]

The list of available deserializers can be seen by using the filter [deserializers[]] in the Filter tab in Advanced Search.

The dropzone widget displays any contained content within the dropzone.


The dropzone widget creates an HTML <div class="tc-dropzone"> to contain its content. During a drag operation the class tc-dragover is added. CSS is used to provide user feedback. For custom styling of this state where a drag is in progress, specify a custom class name with the class attribute and use CSS with the selector

Data types supported

The following data transfer types are supported:

  • text/vnd.tiddler - a list of tiddlers in JSON format (this format is generated by the LinkWidget)
  • text/plain - plain text
  • text/uri-list - a list of URIs as a single tiddler