Files & Clipboard

File drop and clipboard read/write hooks.

import { html, atom, onFileDrop, onPaste, onCopy } from 'mates';

const DropZone = () => {
  const files = atom([]);

  onFileDrop((e) => {
    const list = Array.from(e.dataTransfer?.files ?? []);
    files.set(list.map(f => f.name));
  });

  onPaste((e) => {
    const text = e.clipboardData?.getData('text/plain') ?? '';
    console.log('pasted', text);
  });

  onCopy((e) => {
    // Optional: customize clipboard payload
    e.clipboardData?.setData('text/plain', 'Copied from Mates!');
    e.preventDefault();
  });

  return () => html`<p>${files().length} file(s)</p>`;
};

Overview

onFileDrop(fn) attaches window-level dragover + drop handlers, prevents the browser from navigating to the dropped file, and passes the native DragEvent. Read files via e.dataTransfer.files.

onCopy, onCut, and onPaste receive ClipboardEvent. onSelectionChange receives the current Selection (or null). All listeners are removed on unmount.

Files & clipboard APIs

API	Event	Payload
`onFileDrop(fn)`	window drop	fn(DragEvent) — use e.dataTransfer.files.
`onPaste(fn)`	paste	fn(ClipboardEvent) — text or files via clipboardData.
`onCopy / onCut(fn)`	copy / cut	Can preventDefault and setData.
`onSelectionChange(fn)`	selectionchange	fn(Selection \| null) from window.getSelection().

onFileDrop — window file drop

Drop files onto the preview. onFileDrop prevents default navigation and delivers the DragEvent so you can read dataTransfer.files.

import { html, atom, onFileDrop, renderApp } from 'mates';

const DropZone = () => {

const names = atom([]);

const count = atom(0);

// Window-level drop — prevents default navigation; receives DragEvent

onFileDrop((e) => {

const files = Array.from(e.dataTransfer?.files ?? []);

names.set(files.map(f => f.name));

count.set(files.length);

});

return () => html`

<p class="muted">Drop files onto this preview</p>

<span class="tag">${count()} file${count() === 1 ? '' : 's'}</span>

</div>

<span class="overline">Dropped</span>

${names().length === 0

? html`<div class="mono subtle">None yet…</div>`

: names().map(n => html`<div class="mono">${n}</div>`)

}

</div>

};

renderApp(DropZone, document.getElementById('app'));

onPaste / onCopy / onSelectionChange

Select text, copy, and paste inside the preview to see clipboard and selection hooks update.

import { html, atom, onPaste, onCopy, onSelectionChange, renderApp } from 'mates';

const ClipboardDemo = () => {

const pasted = atom('—');

const selection = atom('');

const copies = atom(0);

onPaste((e) => {

const text = e.clipboardData?.getData('text/plain') ?? '';

pasted.set(text || '(empty)');

});

onCopy(() => {

copies.set(n => n + 1);

});

onSelectionChange((sel) => {

selection.set(sel?.toString() ?? '');

});

return () => html`

Select text below, copy it, or paste into the preview.

</p>

<p>

Select this sentence, then press Ctrl/Cmd+C. Paste with Ctrl/Cmd+V.

</p>

<span class="overline">Copies</span>

<span class="card-title">${copies()}</span>

</div>

<span class="overline">Selection</span>

<span class="card-title hint">${selection() || '—'}</span>

API — onFileDrop & clipboard hooks

import { onFileDrop, onCopy, onCut, onPaste, onSelectionChange } from 'mates'

Prop / Option	Type	Default	Description
`onFileDrop(fn)`*	`void`	—	Window-level dragover + drop. Prevents default open-file navigation. fn receives DragEvent — read e.dataTransfer.files. Auto-removed on unmount.
`onPaste(fn)`	`void`	—	Clipboard paste. fn receives ClipboardEvent; read text via e.clipboardData.getData('text/plain') or inspect e.clipboardData.files.
`onCopy(fn)`	`void`	—	Clipboard copy. Can preventDefault and write via e.clipboardData.setData(...).
`onCut(fn)`	`void`	—	Clipboard cut. Same ClipboardEvent shape as onCopy.
`onSelectionChange(fn)`	`void`	—	document selectionchange. fn receives Selection \| null from window.getSelection().