File

file permite seleccionar un archivo local y persiste únicamente el valor string | number que devuelve el executor. El objeto File del navegador se usa solo como transporte; nunca se guarda en DyonaFormValues.

Probar en vivo

Probar en vivo en el Lab

Contrato del field

Un field File requiere uploadSource.sourceId. accept es opcional y contiene las extensiones o tipos MIME aceptados por ese schema; DYONA no impone una whitelist. maxFileSizeBytes es opcional y debe ser un número finito positivo.

{
  name: 'document',
  label: 'Documento',
  type: 'file',
  required: true,
  uploadSource: {sourceId: 'documents'},
  accept: ['.pdf', '.jpg', '.jpeg', '.png', '.webp', '.xls', '.xlsx', '.csv', '.doc', '.docx', '.txt'],
  maxFileSizeBytes: 10_000_000,
}

El control valida el archivo seleccionado contra accept y maxFileSizeBytes antes de iniciar la carga.

Executor, progreso y cancelación

Pasá fileUploadExecutor a DyonaForm. Recibe el archivo, un AbortSignal, un callback de progreso 0..100 y datos de contexto del field. El control muestra progreso determinado y expone Cancelar durante la carga. La cancelación conserva el value persistido anterior.

DYONA Form no implementa el backend ni el transporte: la aplicación consumidora define HTTP, autenticación, almacenamiento, reintentos y validación del servidor.

Ejemplo completo

import {useCallback, useState} from 'react';
import {DyonaForm, type DyonaFileUploadExecutor, type DyonaFormSchema, type DyonaFormValues} from '@typhonsoftware/dyona-form';

const schema: DyonaFormSchema = {
  title: 'Carga de documento', hideSingleTab: true,
  tabs: [{id: 'documents', title: 'Documento', rows: [{columns: [{
    name: 'document', label: 'Documento', type: 'file', required: true,
    uploadSource: {sourceId: 'documents'},
    accept: ['.pdf', '.jpg', '.jpeg', '.png', '.webp', '.xls', '.xlsx', '.csv', '.doc', '.docx', '.txt'],
    maxFileSizeBytes: 10_000_000,
  }]}]}],
};

export function DocumentForm() {
  const [submittedValues, setSubmittedValues] = useState<DyonaFormValues | null>(null);
  const fileUploadExecutor = useCallback<DyonaFileUploadExecutor>((request) => new Promise((resolve, reject) => {
    let progress = 0;
    let timer: number | null = null;
    const cancel = () => {
      if (timer !== null) window.clearInterval(timer);
      reject(new DOMException('Carga cancelada', 'AbortError'));
    };
    if (request.signal.aborted) return cancel();
    request.signal.addEventListener('abort', cancel, {once: true});
    request.onProgress(0);
    timer = window.setInterval(() => {
      progress += 10;
      request.onProgress(progress);
      if (progress === 100) {
        window.clearInterval(timer!);
        request.signal.removeEventListener('abort', cancel);
        resolve({value: 'FILE-DEMO-001'});
      }
    }, 160);
  }), []);

  return <>
    <DyonaForm schema={schema} fileUploadExecutor={fileUploadExecutor} onSubmit={setSubmittedValues} />
    {submittedValues && <pre>{JSON.stringify(submittedValues, null, 2)}</pre>}
  </>;
}

Luego de una carga exitosa, onSubmit recibe el value persistido:

{document: 'FILE-DEMO-001'}