@svadmin/ui 0.88.1 → 0.91.0

package/dist/components/FieldRenderer.svelte.d.ts

@@ -1,5 +1,6 @@
 export type { FieldDefinition } from '@svadmin/core';
 import type { FieldDefinition } from '@svadmin/core';
+import type { UploadCancelHandler, UploadHandler } from './file-upload-types.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     field: FieldDefinition;
@@ -7,8 +8,22 @@ type $$ComponentProps = {
     onchange: (val: unknown) => void;
     disabled?: boolean;
     invalid?: boolean;
-    errorId?: string;
+    errorId?: string | undefined;
+    id?: string;
     children?: Snippet;
+    /** 嵌套数组的可序列化值由外层 JSON 提交；原始文件保留原生通道。 */
+    nativeSubmit?: boolean;
+    /** 开启异步上传后，字段值只保存可序列化引用，不再接收 File。 */
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
+    onUploadStateChange?: (state: {
+        busy: boolean;
+        unresolved: boolean;
+    }) => void;
+    /** AutoForm 的 JSON 文件模式；独立 FieldRenderer 默认保留原生 multipart。 */
+    fileReferenceMode?: boolean;
+    /** 记录/上传作用域或 reset 变化时只重挂载文件字段。 */
+    fileScopeKey?: string | number | object;
 };
 declare const FieldRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type FieldRenderer = ReturnType<typeof FieldRenderer>;

package/dist/components/FileUpload.svelte

@@ -1,34 +1,19 @@
+<script module lang="ts">
+/* eslint-disable no-import-assign */
+  export type {
+    UploadItemStatus, UploadItem, UploadSession, UploadCancellation,
+    UploadHandler, UploadCancelHandler,
+  } from './file-upload-types.js';
+</script>
+
 <script lang="ts">
   import { onDestroy, untrack } from 'svelte';
   import { X, Upload, RotateCw, Ban } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
   import { useTranslation } from '@svadmin/core/i18n';
-
-  export type UploadItemStatus = 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
-
-  export interface UploadItem {
-    id: string;
-    file: File;
-    status: UploadItemStatus;
-  progress: number;
-  url?: string;
-  error?: string;
-  uploadId?: string;
-  cleanupStatus?: 'pending' | 'success' | 'error';
-}
-
-export interface UploadSession {
-  signal: AbortSignal;
-  idempotencyKey: string;
-  setUploadId: (uploadId: string) => void;
-  onProgress: (progress: number) => void;
-}
-
-export interface UploadCancellation {
-  uploadId: string;
-  idempotencyKey: string;
-  reason: 'cancel' | 'remove' | 'replace' | 'scope-change' | 'unmount';
-}
+  import type {
+    UploadItem, UploadSession, UploadCancellation, UploadHandler, UploadCancelHandler,
+  } from './file-upload-types.js';
 
   interface Props {
     id?: string;
@@ -39,8 +24,11 @@ export interface UploadCancellation {
     maxSize?: number;
     disabled?: boolean;
     required?: boolean;
-    upload?: (file: File, session: UploadSession) => Promise<{ url?: string; uploadId?: string } | undefined> | Promise<void>;
-    cancelUpload?: (file: File, cancellation: UploadCancellation) => Promise<void>;
+    ariaLabel?: string;
+    invalid?: boolean;
+    describedby?: string;
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
     onChange?: (items: UploadItem[]) => void;
     onReject?: (file: File, reason: string) => void;
     class?: string;
@@ -55,6 +43,9 @@ export interface UploadCancellation {
     maxSize,
     disabled = false,
     required = false,
+    ariaLabel,
+    invalid = false,
+    describedby,
     upload,
     cancelUpload,
     onChange,
@@ -79,18 +70,53 @@ export interface UploadCancellation {
     reason?: UploadCancellation['reason'];
     cleanupStarted?: boolean;
     settled?: boolean;
+    // 已成功交付给宿主的尝试不可再被回收，即使 notify 期间宿主同步卸载或抛错。
+    succeeded?: boolean;
   }
   const attempts = new Map<string, UploadAttempt>();
   const latestAttempts = new Map<string, UploadAttempt>();
+  // 失败但已登记 uploadId 的尝试仍可能持有服务端临时会话，需保留到移除/替换/
+  // 卸载/作用域替换或用户重试时，再用原尝试捕获的回调回收。
+  const pendingCleanup = new Map<string, UploadAttempt>();
   let scopeEpoch = 0;
   let observedUpload = untrack(() => upload);
   let destroyed = false;
+  let pendingNativeReset: { event: Event; form: HTMLFormElement } | undefined;
+
+  $effect(() => {
+    const form = input?.form;
+    if (upload || !form) return;
+    const reset = (event: Event) => {
+      flushNativeReset();
+      pendingNativeReset = { event, form };
+      // 原生事件可能在监听器之间执行微任务，下一任务才读取最终取消状态。
+      setTimeout(flushNativeReset, 0);
+    };
+    form.addEventListener('reset', reset);
+    return () => {
+      form.removeEventListener('reset', reset);
+      if (pendingNativeReset?.form === form) pendingNativeReset = undefined;
+    };
+  });
+
+  function flushNativeReset(): void {
+    const reset = pendingNativeReset;
+    if (!reset || reset.event.eventPhase !== Event.NONE) return;
+    pendingNativeReset = undefined;
+    if (destroyed || upload || reset.event.defaultPrevented || input?.form !== reset.form) return;
+    items = [];
+    rejected = [];
+    latestAttempts.clear();
+    emitChange();
+  }
 
   $effect.pre(() => {
     if (upload === observedUpload) return;
     observedUpload = upload;
     scopeEpoch += 1;
     untrack(() => {
+      // 已失败的尝试没有 controller，但仍持有临时会话，作用域替换时一并回收。
+      for (const id of [...pendingCleanup.keys()]) retire(id, 'scope-change');
       const activeIds = [...controllers.keys()];
       for (const id of activeIds) retire(id, 'scope-change');
       const cancelledIds = new Set(activeIds);
@@ -104,16 +130,20 @@ export interface UploadCancellation {
   });
 
   function retire(id: string, reason: UploadCancellation['reason'] = 'cancel'): void {
-    const attempt = attempts.get(id);
+    const attempt = attempts.get(id) ?? pendingCleanup.get(id);
     const controller = controllers.get(id);
     controllers.delete(id);
     attempts.delete(id);
+    pendingCleanup.delete(id);
     if (attempt) attempt.reason = reason;
     controller?.abort();
     if (attempt) cleanupAttempt(id, attempt);
   }
 
   function cleanupAttempt(id: string, attempt: UploadAttempt): void {
+    // 成功附件没有临时会话需要回收；此守卫必须早于 reason 判断，
+    // 因为宿主可能在成功通知中同步卸载，retire 会给成功尝试补上 reason。
+    if (attempt.succeeded) return;
     if (!attempt.reason || attempt.cleanupStarted) return;
     if (attempt?.uploadId && attempt.cancelUpload) {
       attempt.cleanupStarted = true;
@@ -137,11 +167,12 @@ export interface UploadCancellation {
 
   onDestroy(() => {
     destroyed = true;
-    for (const id of controllers.keys()) retire(id, 'unmount');
+    for (const id of [...new Set([...controllers.keys(), ...pendingCleanup.keys()])]) retire(id, 'unmount');
     latestAttempts.clear();
   });
 
   function emitChange(): void {
+    syncNativeInput();
     onChange?.(items.map(item => ({ ...item })));
   }
 
@@ -167,6 +198,13 @@ export interface UploadCancellation {
     return undefined;
   }
 
+  function rejectionLabel(reason: string): string {
+    if (reason === 'File type is not accepted.') return i18n.t('upload.typeRejected');
+    if (reason === 'File is too large.') return i18n.t('upload.tooLarge');
+    if (reason === 'Maximum file count exceeded.') return i18n.t('upload.tooMany');
+    return i18n.t('upload.failed');
+  }
+
   const normalizedMaxFiles = $derived(
     multiple ? (Number.isSafeInteger(maxFiles) && maxFiles > 0 ? maxFiles : 10) : 1,
   );
@@ -193,9 +231,22 @@ export interface UploadCancellation {
     emitChange();
   }
 
+  function syncNativeInput(): void {
+    if (destroyed || upload || !input) return;
+    // 原生表单提交与已接收队列保持同源，避免提交被拒绝或已移除的文件。
+    const transfer = new DataTransfer();
+    for (const item of items) transfer.items.add(item.file);
+    input.files = transfer.files;
+  }
+
   async function process(item: UploadItem): Promise<void> {
     if (destroyed || !upload || disabled) return;
     if (controllers.has(item.id) || !items.some(candidate => candidate.id === item.id)) return;
+    // 重试复用同一 item：先按替换语义回收旧失败尝试的临时会话，避免泄漏。
+    if (pendingCleanup.has(item.id)) {
+      latestAttempts.delete(item.id);
+      retire(item.id, 'replace');
+    }
     const controller = new AbortController();
     controllers.set(item.id, controller);
     const attempt: UploadAttempt = {
@@ -227,6 +278,7 @@ export interface UploadCancellation {
       uploadId: undefined,
       cleanupStatus: undefined,
     });
+    let failed = false;
     try {
       // 宿主回调可以同步卸载或替换组件；通知返回后必须重新确认本次请求仍有效。
       if (destroyed || !current() || controller.signal.aborted) return;
@@ -240,6 +292,9 @@ export interface UploadCancellation {
       });
       if (result?.uploadId !== undefined) register(result.uploadId);
       const uploadId = result?.uploadId ?? attempt.uploadId;
+      // 先锁定成功语义，再通知宿主；通知中的同步卸载/抛错不得把成功对象
+      // 降级为失败或登记为待回收临时会话。
+      attempt.succeeded = true;
       updateCurrent({
         status: 'success',
         progress: 100,
@@ -247,6 +302,8 @@ export interface UploadCancellation {
         ...(uploadId === undefined ? {} : { uploadId }),
       });
     } catch (error) {
+      if (attempt.succeeded) return;
+      failed = true;
       if (!current()) return;
       updateItem(item.id, {
         status: controller.signal.aborted ? 'cancelled' : 'error',
@@ -257,31 +314,30 @@ export interface UploadCancellation {
       if (current()) {
         controllers.delete(item.id);
         attempts.delete(item.id);
+        if (failed && !controller.signal.aborted && attempt.uploadId && attempt.cancelUpload
+          && !attempt.cleanupStarted && latestAttempts.get(item.id) === attempt) {
+          pendingCleanup.set(item.id, attempt);
+        }
       }
     }
   }
 
   function addFiles(selected: File[]): void {
+    flushNativeReset();
     if (destroyed || disabled) return;
-    const available = multiple
-      ? Math.max(0, normalizedMaxFiles - items.length)
-      : 1;
+    syncNativeInput();
     rejected = [];
-    if (selected.length > available) {
-      for (const file of selected.slice(available)) {
-        if (destroyed) return;
-        rejected = [...rejected, { name: file.name, reason: 'Maximum file count exceeded.' }];
-        onReject?.(file, 'Maximum file count exceeded.');
-      }
-    }
-    for (const file of selected.slice(0, multiple ? available : Math.min(available, 1))) {
+    let accepted = 0;
+    for (const file of selected) {
       if (destroyed) return;
-      const reason = validate(file);
+      const full = multiple ? items.length >= normalizedMaxFiles : accepted > 0;
+      const reason = validate(file) ?? (full ? 'Maximum file count exceeded.' : undefined);
       if (reason) {
         rejected = [...rejected, { name: file.name, reason }];
         onReject?.(file, reason);
         continue;
       }
+      accepted += 1;
       const item: UploadItem = { id: nextId(), file, status: 'queued', progress: 0 };
       if (!multiple) {
         for (const previous of items) {
@@ -308,7 +364,7 @@ export interface UploadCancellation {
     retire(id, 'remove');
     latestAttempts.delete(id);
     items = items.filter(item => item.id !== id);
-    if (input) input.value = '';
+    if (input && upload) input.value = '';
     emitChange();
   }
 
@@ -324,6 +380,7 @@ export interface UploadCancellation {
   }
 
   function handleKeydown(event: KeyboardEvent): void {
+    if (disabled) return;
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       input?.click();
@@ -341,6 +398,9 @@ export interface UploadCancellation {
     {multiple}
     disabled={disabled}
     required={upload ? false : required}
+    aria-label={ariaLabel}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
     class="svadmin-file-upload-input"
     onchange={handleInput}
   />
@@ -349,7 +409,12 @@ export interface UploadCancellation {
     role="button"
     tabindex={disabled ? -1 : 0}
     aria-disabled={disabled}
-    onclick={() => input?.click()}
+    aria-label={ariaLabel}
+    aria-describedby={describedby}
+    data-invalid={invalid || undefined}
+    onclick={() => {
+      if (!disabled) input?.click();
+    }}
     onkeydown={handleKeydown}
     ondragover={(event) => event.preventDefault()}
     ondrop={(event) => {
@@ -367,32 +432,32 @@ export interface UploadCancellation {
   {#if rejected.length}
     <ul aria-label={i18n.t('upload.rejectedFiles')}>
       {#each rejected as rejection (rejection)}
-        <li>{rejection.name}: {rejection.reason}</li>
+        <li>{rejection.name}: {rejectionLabel(rejection.reason)}</li>
       {/each}
     </ul>
   {/if}
 
   {#if items.length}
-    <ul class="svadmin-file-upload-list" aria-label="Selected files">
+    <ul class="svadmin-file-upload-list" aria-label={i18n.t('upload.selectedFiles')}>
       {#each items as item (item.id)}
         <li>
           <span class="svadmin-file-upload-name">{item.file.name}</span>
           <span class="svadmin-file-upload-status">
-            {#if item.status === 'uploading'}{item.progress}%{:else}{item.status}{/if}
+            {#if item.status === 'uploading'}{item.progress}%{:else}{i18n.t(`upload.status.${item.status}`)}{/if}
           </span>
           {#if item.status === 'uploading'}
-            <Button type="button" variant="ghost" size="icon-sm" aria-label="Cancel upload" onclick={() => cancel(item.id)}>
+            <Button type="button" variant="ghost" size="icon-sm" aria-label={i18n.t('upload.cancel')} title={i18n.t('upload.cancel')} aria-describedby={describedby} aria-invalid={invalid || undefined} onclick={() => cancel(item.id)}>
               <Ban aria-hidden="true" />
             </Button>
           {:else if item.status === 'error' || item.status === 'cancelled'}
-            <Button type="button" variant="ghost" size="icon-sm" aria-label="Retry upload" {disabled} onclick={() => retry(item)}>
+            <Button type="button" variant="ghost" size="icon-sm" aria-label={i18n.t('upload.retry')} title={i18n.t('upload.retry')} aria-describedby={describedby} aria-invalid={invalid || undefined} {disabled} onclick={() => retry(item)}>
               <RotateCw aria-hidden="true" />
             </Button>
           {/if}
-          <Button type="button" variant="ghost" size="icon-sm" aria-label="Remove file" {disabled} onclick={() => remove(item.id)}>
+          <Button type="button" variant="ghost" size="icon-sm" aria-label={i18n.t('upload.remove')} title={i18n.t('upload.remove')} aria-describedby={describedby} aria-invalid={invalid || undefined} {disabled} onclick={() => remove(item.id)}>
             <X aria-hidden="true" />
           </Button>
-          {#if item.error}<span role="alert">{item.error}</span>{/if}
+          {#if item.status === 'error' || item.status === 'cancelled'}<span role="alert">{i18n.t(item.status === 'cancelled' ? 'upload.cancelled' : 'upload.failed')}</span>{/if}
           {#if item.cleanupStatus === 'pending'}<span role="status">{i18n.t('upload.cleanupPending')}</span>{/if}
           {#if item.cleanupStatus === 'error'}<span role="alert">{i18n.t('upload.cleanupFailed')}</span>{/if}
         </li>

package/dist/components/FileUpload.svelte.d.ts

@@ -1,25 +1,5 @@
-export type UploadItemStatus = 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
-export interface UploadItem {
-    id: string;
-    file: File;
-    status: UploadItemStatus;
-    progress: number;
-    url?: string;
-    error?: string;
-    uploadId?: string;
-    cleanupStatus?: 'pending' | 'success' | 'error';
-}
-export interface UploadSession {
-    signal: AbortSignal;
-    idempotencyKey: string;
-    setUploadId: (uploadId: string) => void;
-    onProgress: (progress: number) => void;
-}
-export interface UploadCancellation {
-    uploadId: string;
-    idempotencyKey: string;
-    reason: 'cancel' | 'remove' | 'replace' | 'scope-change' | 'unmount';
-}
+export type { UploadItemStatus, UploadItem, UploadSession, UploadCancellation, UploadHandler, UploadCancelHandler, } from './file-upload-types.js';
+import type { UploadItem, UploadHandler, UploadCancelHandler } from './file-upload-types.js';
 interface Props {
     id?: string;
     name?: string;
@@ -29,11 +9,11 @@ interface Props {
     maxSize?: number;
     disabled?: boolean;
     required?: boolean;
-    upload?: (file: File, session: UploadSession) => Promise<{
-        url?: string;
-        uploadId?: string;
-    } | undefined> | Promise<void>;
-    cancelUpload?: (file: File, cancellation: UploadCancellation) => Promise<void>;
+    ariaLabel?: string;
+    invalid?: boolean;
+    describedby?: string;
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
     onChange?: (items: UploadItem[]) => void;
     onReject?: (file: File, reason: string) => void;
     class?: string;

package/dist/components/FileUploadField.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { definedOptions } from '@svadmin/core/options';
+  import { onDestroy } from 'svelte';
+  import { X } from '@lucide/svelte';
+  import FileUpload from './FileUpload.svelte';
+  import type {
+    UploadCancelHandler, UploadHandler, UploadItem,
+  } from './file-upload-types.js';
+  import { Button } from './ui/button/index.js';
+  import {
+    mergeUploadReferences, normalizeUploadReferences, uploadReferenceFor,
+    uploadReferenceKey, uploadReferenceLabel, type UploadReference,
+  } from './file-upload-reference.js';
+
+  interface UploadState {
+    busy: boolean;
+    unresolved: boolean;
+  }
+
+  interface Props {
+    id?: string;
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (value: unknown) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
+    onUploadStateChange?: (state: UploadState) => void;
+  }
+
+  let {
+    id, field, value, onchange, disabled = false, invalid = false,
+    describedby, upload, cancelUpload, onUploadStateChange,
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  const UPLOADING = new Set<UploadItem['status']>(['queued', 'uploading']);
+  let baseline = $state<UploadReference[]>([]);
+  let uploaded = $state<UploadReference[]>([]);
+  let lastEmitted = '';
+  let busy = $state(false);
+  let unresolved = $state(false);
+  let missingReference = $state(false);
+
+  // 外部 value 更新基线；本组件自己的写入由队列结算，避免重复回显。
+  $effect(() => {
+    const next = normalizeUploadReferences(value);
+    const key = JSON.stringify(next.map(uploadReferenceKey));
+    if (key === lastEmitted) return;
+    baseline = next;
+    lastEmitted = key;
+  });
+
+  // 单值字段成功上传后替代旧基线；多值字段始终保留原引用。
+  const displayedBaseline = $derived(
+    field.multiple || uploaded.length === 0 ? baseline : [],
+  );
+  const merged = $derived.by(() => field.multiple
+    ? mergeUploadReferences(baseline, uploaded)
+    : uploaded.length > 0 ? [uploaded[uploaded.length - 1] as UploadReference] : baseline.slice(0, 1));
+
+  function report(): void {
+    onUploadStateChange?.({ busy, unresolved });
+  }
+
+  function emit(next: UploadReference[]): void {
+    const key = JSON.stringify(next.map(uploadReferenceKey));
+    if (key === lastEmitted) return;
+    lastEmitted = key;
+    onchange(field.multiple ? next : next[0] ?? null);
+  }
+
+  function handleItems(items: UploadItem[]): void {
+    const successful = items.flatMap(item => {
+      const reference = uploadReferenceFor(item);
+      return reference === undefined ? [] : [reference];
+    });
+    missingReference = items.some(item =>
+      item.status === 'success' && uploadReferenceFor(item) === undefined);
+    busy = items.some(item => UPLOADING.has(item.status));
+    unresolved = missingReference || items.some(item =>
+      item.status === 'error' || item.status === 'cancelled');
+    if (!field.multiple) {
+      // 成功替换退休旧引用；下一次上传未成功时保留最近一次成功引用。
+      if (successful.length > 0) baseline = [];
+      else if (uploaded.length > 0) baseline = items.length > 0 ? uploaded.slice(-1) : [];
+    }
+    uploaded = successful;
+    // 缺少有效标识的成功结果不写入表单；移除该项后会重新结算剩余成功项。
+    if (!missingReference) emit(merged);
+    report();
+  }
+
+  function removeBaseline(index: number): void {
+    if (disabled) return;
+    baseline = baseline.filter((_reference, current) => current !== index);
+    emit(merged);
+  }
+
+  onDestroy(() => {
+    if (!busy && !unresolved) return;
+    busy = false;
+    unresolved = false;
+    report();
+  });
+</script>
+
+{#if displayedBaseline.length > 0}
+  <ul class="svadmin-upload-reference-list" aria-label={field.label}>
+    {#each displayedBaseline as reference, index (uploadReferenceKey(reference) + index)}
+      {@const label = uploadReferenceLabel(reference)}
+      <li class="svadmin-upload-reference">
+        <span class="svadmin-upload-reference-text">{label}</span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={`${i18n.t('common.remove')} ${label}`}
+          aria-describedby={describedby}
+          aria-invalid={invalid || undefined}
+          {disabled}
+          onclick={() => removeBaseline(index)}
+        >
+          <X aria-hidden="true" />
+        </Button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+{#if upload}
+  <FileUpload
+    {...definedOptions({ id })}
+    name={field.key}
+    {...definedOptions({ multiple: field.multiple })}
+    {...definedOptions({ required: field.required && baseline.length === 0 && uploaded.length === 0 })}
+    {disabled}
+    ariaLabel={field.label}
+    {invalid}
+    {...definedOptions({ describedby })}
+    {...definedOptions({ accept: field.accept, maxSize: field.maxSize })}
+    {upload}
+    {...definedOptions({ cancelUpload })}
+    onChange={handleItems}
+  />
+{:else}
+  <!-- AutoForm 的托管字段没有上传回调时不接受 File，避免 File 进入 JSON 快照。 -->
+  <FileUpload
+    {...definedOptions({ id, multiple: field.multiple })}
+    disabled
+    ariaLabel={field.label}
+    {invalid}
+    {...definedOptions({ describedby })}
+  />
+  <p role="alert">{i18n.t('common.operationFailed')}</p>
+{/if}
+
+{#if missingReference}
+  <p role="alert">{i18n.t('common.operationFailed')}</p>
+{/if}
+
+<style>
+  .svadmin-upload-reference-list { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
+  .svadmin-upload-reference { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; }
+  .svadmin-upload-reference-text { overflow: hidden; flex: 1; color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; }
+</style>

package/dist/components/FileUploadField.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { FieldDefinition } from '@svadmin/core';
+import type { UploadCancelHandler, UploadHandler } from './file-upload-types.js';
+interface UploadState {
+    busy: boolean;
+    unresolved: boolean;
+}
+interface Props {
+    id?: string;
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (value: unknown) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    upload?: UploadHandler;
+    cancelUpload?: UploadCancelHandler;
+    onUploadStateChange?: (state: UploadState) => void;
+}
+declare const FileUploadField: import("svelte").Component<Props, {}, "">;
+type FileUploadField = ReturnType<typeof FileUploadField>;
+export default FileUploadField;