Commit baed5f4

import * as UI from '../../lib'

import { Canvas, Meta, Story, Props } from '@storybook/addon-docs/blocks';

import { action } from '@storybook/addon-actions'

<Meta title="Drag & Drop"/>

DragAndDrop has three functions that can be used to handle dragging and dropping of uris, files, and images.

`makeDraggable` is used to make an element Draggable. Along with the HTML Element, it is also necessary to pass an

object with a uri. This is used to set the data on the EventListener for 'dragstart'.

`makeDropTarget` is used to make an element enabled as a drop target. Along with the HTML Element, it is also

necessary to pass in two callback functions; one to handle draggable uris and the other to handle draggable files and images.

`uploadFiles` is used to process the files that a user is uploading.

Drag the message from the "Draggable" story or drag any file or image and drop it on the element in the "Drop Target" story to see it

work.

<Canvas>

<Story name="Draggable">

{() => {

const dragElement = document.createElement("div")

dragElement.appendChild(document.createTextNode("Drag me to the target!"))

const uri = new UI.rdf.NamedNode('https://exampleuser.inrupt.net')

UI.widgets.makeDraggable(dragElement, uri)

return dragElement

}}

</Story>

</Canvas>

<Canvas>

<Story name="Drop Target">

{() => {

const target = document.createElement("div")

target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"

target.appendChild(document.createTextNode("Drop things (URIs, files, ...) here"))

UI.widgets.makeDropTarget(target, action('dropped uri'), action('dropped file'))

return target

}}

</Story>

</Canvas>

The function `uploadFiles` could for example be used in the droppedFileHandler function which is passed to the

makeDropTarget function.

<Canvas>

<Story name="Upload Files" args={{ fileBase: "https://pod.example/Files", pictureBase: "https://pod.example/Pictures"}}>

{({ fileBase, pictureBase }) => {

const target = document.createElement("div")

target.style = "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px"

target.appendChild(document.createTextNode("Drop a file (document, picture, ...) here"))

UI.widgets.makeDropTarget(target, action('dropped uri'), (files) => {

UI.widgets.uploadFiles(UI.store.fetcher, files, fileBase, pictureBase, action('file uploaded successfully'))

})

return target

}}

</Story>

</Canvas>

<Props story="Upload Files" />