Dropzone

<xtyle-dropzone
	label="Upload attachments"
	accept="image/*,.pdf"
	max-size="5mb"
	max-files="5"
	multiple
	paste
	name="attachments"></xtyle-dropzone>

<script type="module">
	import "@xtyle/core/elements";
	import { routeNativeDrop } from "@xtyle/core/elements/dropzone.js";

	const zone = document.querySelector("xtyle-dropzone");

	// The DOM drop is only ONE input. In a native shell (Tauri, Electron) the OS hands the drop to the
	// webview, so `dragover` / `drop` never fire — drive the same zone programmatically instead.
	// `addFiles` takes File objects, filesystem paths, or descriptors, and validates all of them the same way.
	zone.addFiles(["C:/shots/hero.png", "C:/docs/brief.pdf"]);

	// …or let a shell's own drag events route themselves to whichever zone is under the pointer:
	// import { getCurrentWebview } from "@tauri-apps/api/webview";
	// getCurrentWebview().onDragDropEvent(({ payload }) => {
	//   const at = payload.position && {
	//     x: payload.position.x / devicePixelRatio,
	//     y: payload.position.y / devicePixelRatio,
	//   };
	//   if (payload.type === "over") routeNativeDrop("over", { ...at });
	//   else if (payload.type === "drop") routeNativeDrop("drop", { ...at, items: payload.paths });
	//   else routeNativeDrop("leave", {});
	// });

	zone.addEventListener("file-drop", async (event) => {
		for (const file of event.detail.accepted) {
			zone.setProgress(file.id, 0);
			await upload(file, (percent) => zone.setProgress(file.id, percent));
			zone.setStatus(file.id, "done");
		}
	});

	zone.addEventListener("file-reject", (event) => {
		console.warn(event.detail.rejected.map((r) => r.message));
	});

	zone.addEventListener("file-remove", (event) => {
		cancelUpload(event.detail.file.id);
	});
</script>

<script lang="ts">
	import { Dropzone } from "@xtyle/svelte";
	import type { XtyleDropzone } from "@xtyle/core/elements";

	let zone = $state<XtyleDropzone>();

	// The programmatic path is the same one a native shell drives: paths in, validated files out.
	function onNativeDrop(paths: string[]) {
		zone?.addFiles(paths);
	}

	async function onDrop(event: CustomEvent) {
		for (const file of event.detail.accepted) {
			await upload(file, (percent: number) => zone?.setProgress(file.id, percent));
			zone?.setStatus(file.id, "done");
		}
	}
</script>

<Dropzone
	bind:element={zone}
	label="Upload attachments"
	accept="image/*,.pdf"
	maxSize="5mb"
	maxFiles={5}
	multiple
	paste
	name="attachments"
	onfiledrop={onDrop}
	onfilereject={(event) => console.warn(event.detail.rejected)} />

---
import Dropzone from "@xtyle/astro/Dropzone.astro";
---

<!-- Server-rendered: the surface, the hint, the browse chip, and the real file input all ship in the
     HTML, so the zone is a working picker and form field before a byte of JavaScript arrives. -->
<Dropzone
	label="Upload attachments"
	accept="image/*,.pdf"
	maxSize="5mb"
	maxFiles={5}
	multiple
	paste
	name="attachments"
	prompt="Drop your files here"
	hint="Images and PDFs, up to 5 MB each" />

<!-- `static` keeps the server render and never loads the runtime: a plain file field in a plain form,
     zero JS. Drag-and-drop, paste, and the upload list are what hydration buys you. -->
<Dropzone static name="resume" label="Attach a résumé" accept=".pdf,.docx" />

<script>
	import "@xtyle/core/elements";
	import { routeNativeDrop } from "@xtyle/core/elements/dropzone.js";

	const zone = document.querySelector("xtyle-dropzone");

	// A native (OS) drop never reaches the DOM inside a shell webview; route it in by hand.
	zone?.addFiles(["/tmp/report.pdf"]);
	zone?.addEventListener("file-drop", (event) => console.log(event.detail.accepted));
</script>