Zona de carga.

<div class="ui-sample ui-dropzone" data-upload-dropzone><input id="upload-dropzone-0" type="file" accept=".csv,text/csv"><label for="upload-dropzone-0"><span class="ui-dropzone__icon" aria-hidden="true">↑</span><strong>Arrastra un CSV aquí</strong><span>o selecciónalo desde tu equipo · máximo 10 MB</span></label><button class="btn btn--secondary" type="button">Seleccionar archivo</button></div>

<div class="ui-sample ui-dropzone border border-slate-300 bg-white p-4 text-slate-950" data-upload-dropzone><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="upload-dropzone-0" type="file" accept=".csv,text/csv"><label for="upload-dropzone-0"><span class="ui-dropzone__icon" aria-hidden="true">↑</span><strong>Arrastra un CSV aquí</strong><span>o selecciónalo desde tu equipo · máximo 10 MB</span></label><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Seleccionar archivo</button></div>

import type { ChangeEventHandler, DragEventHandler, MouseEventHandler } from "react";

export interface UploadDropzoneFile {
  /** Nombre del archivo elegido. */
  name: string;
  /** Tamaño y estado del archivo, en una línea (por ejemplo «2,4 MB · listo para validar»). */
  detail?: string;
}

export interface UploadDropzoneProps {
  /** Id del campo de archivo; la zona es su etiqueta. Usa uno distinto por zona en la página. */
  id?: string;
  name?: string;
  /** Tipos aceptados, como en el atributo HTML `accept` (extensiones o tipos MIME separados por comas). */
  accept?: string;
  /** Permite elegir varios archivos. */
  multiple?: boolean;
  /** Se llama al elegir archivos en el campo; el campo no es controlado. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto principal de la zona vacía. */
  title?: string;
  /** Indicación bajo el texto principal: origen y tamaño máximo. */
  description?: string;
  /** Texto del botón para elegir un archivo. */
  browseLabel?: string;
  /** Se llama al pulsar el botón para elegir un archivo. */
  onBrowse?: MouseEventHandler<HTMLButtonElement>;
  /** Archivo ya elegido; reemplaza el texto de la zona y el botón pasa a quitarlo. */
  file?: UploadDropzoneFile;
  /** Texto del botón para quitar el archivo elegido. */
  removeLabel?: string;
  /** Se llama al pulsar el botón para quitar el archivo elegido. */
  onRemove?: MouseEventHandler<HTMLButtonElement>;
  /** Se llama mientras se arrastra sobre la zona; llama a `preventDefault()` para permitir soltar. */
  onDragOver?: DragEventHandler<HTMLDivElement>;
  /** Se llama al soltar archivos en la zona; vienen en `event.dataTransfer.files`. */
  onDrop?: DragEventHandler<HTMLDivElement>;
  className?: string;
}

/**
 * Zona para arrastrar o elegir un archivo antes de subirlo, que muestra el archivo elegido y permite quitarlo; se usa cuando subir el archivo es la tarea principal de la pantalla.
 *
 * La zona es la etiqueta del campo de archivo: sin JavaScript, un clic abre el selector del sistema. El estado con archivo llega por `file`.
 *
 * @example <UploadDropzone id="serie" name="serie" onDrop={recibir} onBrowse={abrirSelector} />
 * @example <UploadDropzone id="serie" file={{ name: "serie-empleo.csv", detail: "2,4 MB · listo para validar" }} onRemove={quitar} />
 */
export function UploadDropzone({
  id = "upload-dropzone-0",
  name,
  accept = ".csv,text/csv",
  multiple,
  onChange,
  title = "Arrastra un CSV aquí",
  description = "o selecciónalo desde tu equipo · máximo 10 MB",
  browseLabel = "Seleccionar archivo",
  onBrowse,
  file,
  removeLabel = "Quitar archivo",
  onRemove,
  onDragOver,
  onDrop,
  className,
}: UploadDropzoneProps) {
  const nombre = file ? file.name : title;
  const texto = file ? file.detail : description;
  return (
    <div className={["ui-dropzone", className].filter(Boolean).join(" ")} data-upload-dropzone onDragOver={onDragOver} onDrop={onDrop}>
      <input id={id} name={name} type="file" accept={accept} multiple={multiple} onChange={onChange} />
      <label htmlFor={id}>
        <span className="ui-dropzone__icon" aria-hidden="true">↑</span>
        {nombre ? <strong>{nombre}</strong> : null}
        {texto ? <span>{texto}</span> : null}
      </label>
      <button className="btn btn--secondary" type="button" onClick={file ? onRemove : onBrowse}>{file ? removeLabel : browseLabel}</button>
    </div>
  );
}