DataTransferItem

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The DataTransferItem object represents one drag data item. During a drag operation, each DragEvent has a dataTransfer property which contains a list of drag data items. Each item in the list is a DataTransferItem object.

DataTransferItem was primarily designed for the HTML Drag and Drop API, and is still specified in the HTML drag-and-drop section, but it is now also used by other APIs, such as ClipboardEvent.clipboardData and InputEvent.dataTransfer. Documentation of DataTransferItem will primarily discuss its usage in drag-and-drop operations, and you should refer to the other APIs' documentation for usage of DataTransferItem in those contexts.

This interface has no constructor.

Instance properties

DataTransferItem.kind Read only: The kind of drag data item, string or file.
DataTransferItem.type Read only: The drag data item's type, typically a MIME type.

Instance methods

DataTransferItem.getAsFile(): Returns the File object associated with the drag data item (or null if the drag item is not a file).
DataTransferItem.getAsFileSystemHandle() Experimental: Returns a FileSystemFileHandle if the dragged item is a file, or a FileSystemDirectoryHandle if the dragged item is a directory.
DataTransferItem.getAsString(): Invokes the specified callback with the drag data item string as its argument.
DataTransferItem.webkitGetAsEntry(): Returns an object based on FileSystemEntry representing the selected file's entry in its file system. This will generally be either a FileSystemFileEntry or FileSystemDirectoryEntry object.

Example

All of this interface's methods and properties have their own reference page, and each reference page has an example of its usage.

Specifications

Specification
HTML Standard # the-datatransferitem-interface

Browser compatibility

BCD tables only load in the browser