pasteFiles

pasteFiles(handler) is a ref factory from pota/use/clipboard. It fires only when at least one File is present in the clipboard (pasted images, files copied from the OS file manager, etc.) and runs preventDefault() so the host doesn't also receive a textual representation.

Examples

Capture pasted files

Paste a file or screenshot into the focused target and list each pasted File's name, type, and size.

import { render, signal } from 'pota'
import { For } from 'pota/components'
import { pasteFiles } from 'pota/use/clipboard'

function App() {
	const pasted = signal([])

	return (
		<main>
			<p>
				copy a file in your OS file manager (or take a screenshot)
				then click below and paste
			</p>
			<div
				tabindex="0"
				style={{
					border: '2px dashed #aaa',
					padding: '1rem',
					'min-height': '4rem',
				}}
				use:ref={pasteFiles(files => {
					pasted.write(
						files.map(f => ({
							name: f.name || '(unnamed)',
							type: f.type || 'unknown',
							size: f.size,
						})),
					)
				})}
			>
				click me, then paste (Ctrl/Cmd+V)
			</div>

			<ul>
				<For each={pasted.read}>
					{file => (
						<li>
							{file.name} —{' '}
							<small>
								{file.type}, {file.size}B
							</small>
						</li>
					)}
				</For>
			</ul>
		</main>
	)
}

render(App)