@functionalcms/svelte-components 4.28.0 → 4.30.0

package/dist/components/form/Dropzone.svelte

@@ -1,183 +1,158 @@
 <script lang="ts">
-	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
-	import { cn } from '../../utils.js';
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		label: string;
+		buttonLabel: string
+		css: string;
+		accept: string;
+		multiple: boolean;
+		maxSize: number;
+		renderSelctedFilesPreview?: Snippet<[File[]]>;
+	}
 
 	let {
-		id,
-		children,
-		maxFiles,
-		maxFileSize,
-		fileCount,
-		disabled = false,
-		onUpload,
-		onFileRejected,
-		accept,
-		class: css,
-		...rest
-	}: FileDropZoneProps = $props();
+		label = "Drag and drop files here <br/> or",
+		buttonLabel = "Browse",
+		css = "dropzone",
+		accept = "",
+		multiple = true,
+		maxSize = Infinity,
+		renderSelctedFilesPreview = undefined,
+	}: Partial<Props> = $props();
+
+	let isDragging = $state(false);
+	let files = $state<File[]>([]);
+	let fileInput: HTMLInputElement;
+
+	function onInputChange(e) {
+		const picked = Array.from<File>(e.currentTarget.files ?? []);
+		setFiles(picked);
+	}
 
-	if (maxFiles !== undefined && fileCount === undefined) {
-		console.warn(
-			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
+	function setFiles(newFiles: File[]) {
+		const filtered = newFiles.filter(
+			(f: File) => f.size <= maxSize && matchesAccept(f),
 		);
+		files = [...files, ...filtered];
 	}
 
-	let uploading = $state(false);
-
-	const drop = async (
-		e: DragEvent & {
-			currentTarget: EventTarget & HTMLLabelElement;
-		}
-	) => {
-		if (disabled || !canUploadFiles) return;
-
-		e.preventDefault();
-
-		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
-
-		await upload(droppedFiles);
-	};
-
-	const change = async (
-		e: Event & {
-			currentTarget: EventTarget & HTMLInputElement;
-		}
-	) => {
-		if (disabled) return;
-
-		const selectedFiles = e.currentTarget.files;
-
-		if (!selectedFiles) return;
-
-		await upload(Array.from(selectedFiles));
-
-		// this if a file fails and we upload the same file again we still get feedback
-		(e.target as HTMLInputElement).value = '';
-	};
-
-	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
-		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
-
-		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
-
-		if (!accept) return undefined;
-
-		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
-		const fileType = file.type.toLowerCase();
-		const fileName = file.name.toLowerCase();
-
-		const isAcceptable = acceptedTypes.some((pattern) => {
-			// check extension like .mp4
-			if (fileType.startsWith('.')) {
-				return fileName.endsWith(pattern);
+	function matchesAccept(file: File) {
+		if (!accept) return true;
+		// Basic accept check (MIME or extension)
+		return accept.split(",").some((rule) => {
+			const trimmed = rule.trim();
+			if (trimmed.startsWith("."))
+				return file.name.toLowerCase().endsWith(trimmed.toLowerCase());
+			if (trimmed.endsWith("/*")) {
+				const typeRoot = trimmed.slice(0, -2);
+				return file.type.startsWith(typeRoot + "/");
 			}
-
-			// if pattern has wild card like video/*
-			if (pattern.endsWith('/*')) {
-				const baseType = pattern.slice(0, pattern.indexOf('/*'));
-				return fileType.startsWith(baseType + '/');
-			}
-
-			// otherwise it must be a specific type like video/mp4
-			return fileType === pattern;
+			return file.type === trimmed;
 		});
+	}
 
-		if (!isAcceptable) return 'File type not allowed';
-
-		return undefined;
-	};
-
-	const upload = async (uploadFiles: File[]) => {
-		uploading = true;
-
-		const validFiles: File[] = [];
-
-		for (let i = 0; i < uploadFiles.length; i++) {
-			const file = uploadFiles[i];
-
-			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
-
-			if (rejectedReason) {
-				onFileRejected?.({ file, reason: rejectedReason });
-				continue;
-			}
-
-			validFiles.push(file);
-		}
-
-		await onUpload(validFiles);
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		const dropped = Array.from(e.dataTransfer?.files ?? []);
+		setFiles(dropped);
+		isDragging = false;
+	}
 
-		uploading = false;
-	};
+	function onDragOver(e: DragEvent) {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "copy";
+		isDragging = true;
+	}
 
-	const canUploadFiles = $derived(
-		!disabled &&
-			!uploading &&
-			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
-	);
+	function onDragLeave(e: DragEvent) {
+		e.preventDefault();
+		isDragging = false;
+	}
 </script>
 
-<label
-	ondragover={(e) => e.preventDefault()}
-	ondrop={drop}
-	for={id}
-	aria-disabled={!canUploadFiles}
-	class={cn(
-		'flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed border-border p-6 transition-all hover:cursor-pointer hover:bg-accent/25 aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
-		className
-	)}
+<div
+	class="{css} {isDragging ? 'dragging' : ''}"
+	role="button"
+	tabindex="-1"
+	ondrop={onDrop}
+	ondragover={onDragOver}
+	ondragleave={onDragLeave}
+	onkeydown={(event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			fileInput?.click();
+		}
+	}}
+	aria-label="File upload dropzone"
 >
-	{#if children}
-		{@render children()}
-	{:else}
-		<div class="flex flex-col place-items-center justify-center gap-2">
-			<div
-				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					class="lucide lucide-upload-icon lucide-upload"
-					><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
-						points="17 8 12 3 7 8"
-					/><line x1="12" x2="12" y1="3" y2="15" /></svg
-				>
-			</div>
-			<div class="flex flex-col gap-0.5 text-center">
-				<span class="font-medium text-muted-foreground">
-					Drag 'n' drop files here, or click to select files
-				</span>
-				{#if maxFiles || maxFileSize}
-					<span class="text-sm text-muted-foreground/75">
-						{#if maxFiles}
-							<span>You can upload {maxFiles} files</span>
-						{/if}
-						{#if maxFiles && maxFileSize}
-							<span>(up to {displaySize(maxFileSize)} each)</span>
-						{/if}
-						{#if maxFileSize && !maxFiles}
-							<span>Maximum size {displaySize(maxFileSize)}</span>
-						{/if}
-					</span>
-				{/if}
-			</div>
-		</div>
-	{/if}
 	<input
-		{...rest}
-		disabled={!canUploadFiles}
-		{id}
-		{accept}
-		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
+		id="file-input"
 		type="file"
-		onchange={change}
-		class="hidden"
+		{accept}
+		{multiple}
+		onchange={onInputChange}
+		bind:this={fileInput}
+		aria-hidden="true"
 	/>
-</label>
+	<label for="file-input" class="prompt">
+		<span class="title">{@html label}</span>
+		<button type="button" class="browse">{buttonLabel}</button>
+	</label>
+
+	{#if files.length}
+		{#if renderSelctedFilesPreview}
+			{@render renderSelctedFilesPreview(files)}
+		{:else}
+			<ul class="file-list">
+				{#each files as f}
+					<li>{f.name} — {(f.size / 1024).toFixed(1)} KB</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.dropzone {
+		border: 2px dashed #9aa0a6;
+		border-radius: 10px;
+		padding: 24px;
+		text-align: center;
+		transition:
+			border-color 0.15s,
+			background-color 0.15s;
+		position: relative;
+		cursor: pointer;
+	}
+	.dropzone.dragging {
+		border-color: #1a73e8;
+		background-color: #f0f7ff;
+	}
+	/* Hide native input but keep it accessible via label */
+	input[type="file"] {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+	}
+	.prompt {
+		display: grid;
+		gap: 8px;
+		justify-items: center;
+	}
+	.browse {
+		padding: 6px 12px;
+		border: 1px solid #1a73e8;
+		background: #1a73e8;
+		color: white;
+		border-radius: 6px;
+	}
+	.file-list {
+		margin-top: 12px;
+		text-align: left;
+	}
+</style>

package/dist/components/form/Dropzone.svelte.d.ts

@@ -1,4 +1,12 @@
-import { type FileDropZoneProps } from './dropzone.js';
-declare const Dropzone: import("svelte").Component<FileDropZoneProps, {}, "">;
+import type { Snippet } from "svelte";
+declare const Dropzone: import("svelte").Component<Partial<{
+    label: string;
+    buttonLabel: string;
+    css: string;
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    renderSelctedFilesPreview?: Snippet<[File[]]>;
+}>, {}, "">;
 type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;

package/dist/components/form/SmartForm.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import Dropzone from './Dropzone.svelte';
 	import Input from './Input.svelte';
 	import { type Field, FieldType, InputType, SubmitResult } from './form.js';
 	import { fade } from 'svelte/transition';
 
+	interface Css {
+		form?: string;
+		error?: string;
+	}
+
 	interface Props {
 		action?: string;
-		css?: string;
+		css?: Css;
 		successMessage?: string;
 		submitButonText?: string;
 		fields?: Array<Field>;
@@ -15,7 +21,7 @@
 	let {
 		action,
 		fields = [],
-		css = '',
+		css = {},
 		submitButonText = 'Submit',
 		successMessage,
 		onMessageSubmitted
@@ -45,6 +51,17 @@
 			console.error('Error submitting form:', error);
 		}
 	};
+	const handleFilesSelect = (field: Field) => {
+		const processNewUpload = async (files: File[]) => {
+			if (!Array.isArray(field.value)) {
+				field.value = [];
+			}
+
+			field.value = [...field.value, ...files];
+		};
+
+		return processNewUpload;
+	};
 </script>
 
 {#if showMessage}
@@ -52,7 +69,7 @@
 		{successMessage}
 	</div>
 {:else}
-	<form method="POST" bind:this={form} class={css}>
+	<form method="POST" bind:this={form} class={css.form}>
 		<fieldset>
 			{#each fields as field}
 				{#if field.type === FieldType.Input}
@@ -128,6 +145,13 @@
 							{option.label}
 						</label>
 					{/each}
+				{:else if field.type === FieldType.DropZone}
+					<Dropzone ondrop={handleFilesSelect(field)}>
+						{field.label}
+					</Dropzone>
+				{/if}
+				{#if field.error}
+					<div class={css.error}>{field.error}</div>
 				{/if}
 			{/each}
 

package/dist/components/form/SmartForm.svelte.d.ts

@@ -1,7 +1,11 @@
 import { type Field, SubmitResult } from './form.js';
+interface Css {
+    form?: string;
+    error?: string;
+}
 interface Props {
     action?: string;
-    css?: string;
+    css?: Css;
     successMessage?: string;
     submitButonText?: string;
     fields?: Array<Field>;

package/dist/components/form/form.d.ts

@@ -3,7 +3,8 @@ export declare enum FieldType {
     Textarea = "textarea",
     Radio = "radio",
     Checkbox = "checkbox",
-    Hidden = "hidden"
+    Hidden = "hidden",
+    DropZone = "dropzone"
 }
 export declare enum InputType {
     Text = "text",
@@ -39,8 +40,9 @@ export interface Field {
         checked?: boolean;
     }>;
     checked?: boolean;
-    value?: string | number | boolean;
+    value?: string | number | boolean | File[];
     props?: any;
+    error?: string;
 }
 export declare enum SubmitResult {
     Success = "success",

package/dist/components/form/form.js

@@ -5,6 +5,7 @@ export var FieldType;
     FieldType["Radio"] = "radio";
     FieldType["Checkbox"] = "checkbox";
     FieldType["Hidden"] = "hidden";
+    FieldType["DropZone"] = "dropzone";
 })(FieldType || (FieldType = {}));
 export var InputType;
 (function (InputType) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.28.0",
+	"version": "4.30.0",
 	"license": "MIT",
 	"watch": {
 		"build": {