{label} input.click()} ondragover={(event) => { event.preventDefault(); dragging = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'; }} ondragleave={() => (dragging = false)} ondrop={drop} class={`mt-2 block w-full rounded border border-dashed p-5 text-center transition-colors ${dragging ? 'border-[var(--site-text)] bg-[var(--site-hover)]' : 'border-[var(--site-border)] hover:border-[var(--site-muted)]'}`} > {fileName ? `Selected: ${fileName}` : 'Drop an image here or click to browse'}

JPEG, PNG, or WebP · up to 5 MB

{#if fileName}Clear selection{/if}