@filerobot/attach-dnd

Attaches drag & drop zone to the specified HTML target, so any file dropped in that target would be uploaded.

Usage no npm install needed!

<script type="module">
  import filerobotAttachDnd from 'https://cdn.skypack.dev/@filerobot/attach-dnd';
</script>

README

@filerobot/attach-dnd

Attaches drag & drop (dnd) zone of the Filerobot widget to some HTML element of your page Filerobot Media Asset Widget.

Note: This plugin requires @filerobot/explorer plugin to be existed & used in the widget, as the attach-dnd plugin role is only attaching the drag & drop zone to some element of your page and the rest is handled through the explorer & widget.

Usage

From NPM

The plugin can be installed from NPM as @filerobot/attach-dnd

npm install --save @filerobot/attach-dnd

then

import AttachDragAndDrop from '@filerobot/attach-dnd'
...
...
...
filerobot.use(AttachDragAndDrop, optionsObject)

From CDN

If installed via a CDN link, the plugin is inside the Filerobot global object as Filerobot.AttachDnD

const AttachDragAndDrop = window.Filerobot.AttachDnD
...
...
...
filerobot.use(AttachDragAndDrop, optionsObject)

Options

target: string or HTML Element (required)

default: document.body

The selector (ID, Class) of an HTML element or an existed HTML element that would be attached with the drag & drop zone, also the drop hint would be shown to this target selector's element, by default it's the body of the document page.

fixedDropHint: boolean (optional)

default: false

If set to true, the drop hint shown while dragging the file/folder on the target element would be in a fixed position.

Note: it might be useful to use this property if your page scroll and the drop zone doesn't keep in the same scroll position.

noDropHint: boolean (optional)

default: false

If you don't want to show the drop hint shown while dragging the file/folder over the target element then provide true value here, otherwise it would be shown normally.