Skip to content
+

File Explorer - Drag and Drop

Learn how to use the drag and drop features of the File Explorer.

Drag and drop properties

The @stoked-ui/file-explorer package exposes four different properties to manage drag and drop functionality:

  • dndInternal
  • dndExternal
  • dndFileTypes
  • dndTrash

Internal

Set the dndInternal prop on the FileExplorer component to true to enable drag and drop within the same tree.

The demo below shows how to enable drag and drop within the same tree:

  • History

External

Set the dndExternal prop on the FileExplorer component to true to enable drag and drop within the same tree.

The demo below shows how to enable drag and drop files onto the tree:

  • History

Trash

Set the dndTrash prop on the FileExplorer component to true to enable the drag and drop trash feature. The trash feature consists of a trash icon at the bottom of the list that allows you to remove list items by dropping them on it.

The demo below shows how to enable the drag and drop trash feature:

  • History

  • Trash

File Types

Set the dndFileTypes prop on the FileExplorer component to [...file-type,]. This allows you to configure which file types can be accepted by the dndExternal feature. The file types are defined by their MIME type.

The demo below shows how to configure the file types accepted by the dndExternal feature:

  • History

  • Trash

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.