1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/DropzoneWidget.tid
Saq Imtiaz eced60853f
Extend Dropzone widget (#5597)
* Extend dropzone widget with optional actions invoked after tm-import-tiddlers message has been sent. Allows triggering an alternative UX for the import

* Allow restricting a dropzone to specific mimeTypes via mimeTypes and mimeTypesPrefix attributes

* Use a mimeTypesFilter instead of the mimeTypes and mimeTypesPrefix attributes

* Updated refresh handling

* Syntax cleanup

* Replace references to mimeType with content type for consistency with existing documentation. Update documentation for DropZone widget
2021-04-10 09:48:50 +01:00

42 lines
2.5 KiB
Plaintext

caption: dropzone
created: 20131024141900000
modified: 20210410062410660
tags: Widgets
title: DropzoneWidget
type: text/vnd.tiddlywiki
! Introduction
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
|!Attribute |!Description |
|deserializer |<<.from-version "5.1.15">> Optional name of deserializer to be used (by default the deserializer is derived from the file extension) |
|enable |<<.from-version "5.1.22">> Optional value "no" to disable the dropzone functionality (defaults to "yes") |
|class |<<.from-version "5.1.22">> Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone") |
|autoOpenOnImport |<<.from-version "5.1.23">> Optional value "no" or "yes" that can override tv-auto-open-on-import |
|importTitle|<<.from-version "5.1.23">> Optional tiddler title to use for import process instead of ~$:/Import |
|actions|<<.from-version "5.1.24">> 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. |
|contentTypesFilter |<<.from-version "5.1.24">> Optional filter that specifies the [[content types|ContentType]] accepted by the dropzone. |
<<.tip """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 inspected by executing `Object.keys($tw.Wiki.tiddlerDeserializerModules).sort().join("\n")` in the browser JavaScript console.
The dropzone widget displays any contained content within the dropzone.
! Display
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.
! 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