DataTransferItem
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
* Some parts of this feature may have varying levels of support.
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.kindRead only-
The kind of drag data item,
stringorfile. DataTransferItem.typeRead only-
The drag data item's type, typically a MIME type.
Instance methods
DataTransferItem.getAsFile()-
Returns the
Fileobject associated with the drag data item (or null if the drag item is not a file). DataTransferItem.getAsFileSystemHandle()-
Returns a
Promisethat fulfills with aFileSystemFileHandleif the dragged item is a file, or fulfills with aFileSystemDirectoryHandleif 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
FileSystemEntryrepresenting the selected file's entry in its file system. This will generally be either aFileSystemFileEntryorFileSystemDirectoryEntryobject.
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 # the-datatransferitem-interface |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DataTransferItem
|
|
|
|
|
|
|
|
|
|
|
|
|
getAsFile
|
|
|
|
|
|
|
|
|
|
|
|
|
getAsFileSystemHandle
|
|
|
|
|
|
|
|
|
|
|
|
|
getAsString
|
|
|
|
|
|
|
|
|
|
|
|
|
kind
|
|
|
|
|
|
|
|
|
|
|
|
|
type
|
|
|
|
|
|
|
|
|
|
|
|
|
webkitGetAsEntry
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.