let session = new DragSession();
let queued: File[] = [];

function queueFiles(files: readonly File[]) {
	queued = [...queued, ...files];
	void handle.update();
}

<Header>Product photos</Header>
<DropZone
	name="photos"
	accept="image/png, image/jpeg, image/webp"
	multiple
	// The native input stays in the accessibility tree and the tab order; the
	// dashed label is what a person sees, and it draws the focus ring for both.
	parts={{ input: [visuallyHidden()] }}
	mix={[
		dropZone(session),
		on<HTMLLabelElement, "ui:drop-files">("ui:drop-files", (event) => queueFiles(event.files)),
		on<HTMLLabelElement, "change">("change", (event) => {
			let input = event.target as HTMLInputElement;
			queueFiles([...(input.files ?? [])]);
		}),
	]}
>
	<ImageIcon aria-hidden="true" />
	<span>Drag photos here, or click to browse</span>
	<span>PNG, JPEG or WebP · up to 10 MB each</span>
</DropZone>
{queued.length === 0 ? (
	<Empty>
		<Empty.Title>No photos queued</Empty.Title>
		<Empty.Description>Whatever you drop in shows up here before it uploads.</Empty.Description>
	</Empty>
) : (
	queued.map((file, index) => (
		<Item key={`${file.name}-${index}`}>
			<Item.Content>
				<Item.Title>{file.name}</Item.Title>
				<Item.Description>{formatFileSize(file.size)}</Item.Description>
			</Item.Content>
			<Item.Actions>
				<Button
					variant="ghost"
					color="neutral"
					aria-label={`Remove ${file.name}`}
					mix={[on<HTMLButtonElement, "click">("click", () => removeFile(index))]}
				>
					<XIcon />
				</Button>
			</Item.Actions>
		</Item>
	))
)}