DropZone

An area that takes drops of text and files, and pastes from keyboard users.

<script>
  import { $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import DropZone from '@brumate/ui/DropZone.brm';
  import FileTrigger from '@brumate/ui/FileTrigger.brm';
  import Text from '@brumate/ui/Text.brm';
  import type { DropEvent } from '@brumate/ui/drop.ts';
  import Icon from '../../src/components/Icon.brm';

  let received = $signal<string[]>([]);

  async function dropped(event: DropEvent) {
    const names: string[] = [];
    for (const item of event.items) {
      if (item.kind === 'file') {
        names.push(item.name);
      } else if (item.types.has('text/plain')) {
        names.push(await item.getText('text/plain'));
      }
    }
    received = names;
  }
</script>

<DropZone class="ui-dropzone" onDrop=dropped>
  <Text slot="label">
    #if (received.length > 0) {
      {received.join(', ')}
    } #else {
      Drop or paste text or files here
    }
  </Text>
  <FileTrigger allowsMultiple onSelect=((files) => (received = [...(files ?? [])].map((file) => file.name)))>
    <Button class="ui-button"><Icon name="upload" /> Browse</Button>
  </FileTrigger>
</DropZone>

<DropZone onDrop=dropped>
  <Text slot="label">Drop files here</Text>
</DropZone>

• onDrop gets the items of a drop. A text item has types and getText(type). A file item has name, type and getFile().
• onDropEnter and onDropExit run as a drag that it takes comes over it and leaves.
• getDropOperation(types, allowed) gets the types of a drag and the operations its source allows, and returns one of them, or 'cancel' to refuse it. Files show as their types, such as image/png. Without it, the first allowed operation is used. A drag shows data-drop-target only for an allowed operation.
• A drag of the rows of a GridList gives one item for each row.
• isDisabled refuses every drop.
• A FileTrigger in it picks files from the device, for users who do not drag.

Keyboard and screen readers

• A hidden button in the area takes the focus. A click on the area, not on a control in it, focuses it.
• A paste on the button drops the text or files of the clipboard.
• A Text with slot="label" names the button. aria-label names it too, "DropZone" by default.

Styles

Drops need scripts. The server renders the area and its label.