dropzone

dropzone(options) turns the element into a drop target. Files dropped on it run through the same pipeline as upload (filters → upload → callbacks). While files are dragged over, the element gets a data-dragover attribute — style it with [data-dragover]. The standard dragenter / dragleave counter pattern is used so crossing child elements doesn't strip the attribute mid-hover. Part of pota/use/upload.

Arguments

dropzone(options) takes the same options object as upload (minus clearOnUpload, which is input-specific): endpoint, field, existsUrl, parseResponse, accept, maxSize, onProgress, onUpload, onFile, onError, onReject. See upload for the full table.

Returns: a ref function (node: HTMLElement) => void for use:ref. In-flight uploads abort when the surrounding reactive scope is disposed.

Examples

A drop target

Turns a <div> into a drop zone that accepts images and PDFs. The [data-dragover] selector lights up the outline while files hover.

import { render, signal } from 'pota'
import { dropzone } from 'pota/use/upload'

const css = `
	.drop-target {
		padding: 2rem;
		border: 1px solid #ccc;
	}
	.drop-target[data-dragover] {
		outline: 2px dashed #0a84ff;
	}
`

function App() {
	const log = signal('')

	return (
		<>
			<style>{css}</style>
			<div
				class="drop-target"
				use:ref={dropzone({
					endpoint: '/api/upload',
					accept: 'image/*,application/pdf',
					onUpload: results =>
						log.write(`uploaded ${results.length}`),
				})}
			>
				Drop files here
			</div>
			<p>{log.read}</p>
		</>
	)
}

render(App)