FileDropzone e FileRow

Formulário

Área para arrastar e soltar arquivos, que também abre o seletor por clique ou teclado, e a linha de cada arquivo enviado com baixar e remover.

Substitui no Brain:fp-dropzonefp-file-rowFilesPanelAnexosDoComunicado

Enviar e listar arquivos

Arraste arquivos aqui ou clique para enviar

PDF, XLSX, DOCX, PNG ou JPG · até 20 MB por arquivo

Proposta comercial · 2026-07.pdf

412 KB · enviado hoje

"use client";

import { FileDropzone, FileRow, toast } from "@paytime/ui";
import { useState } from "react";

const KB = 1024;

export default function Example() {
  const [files, setFiles] = useState([{ name: "Proposta comercial · 2026-07.pdf", size: 412 * KB }]);
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <FileDropzone
        hint="PDF, XLSX, DOCX, PNG ou JPG · até 20 MB por arquivo"
        accept=".pdf,.xlsx,.docx,image/png,image/jpeg"
        onFiles={(picked) => {
          setFiles((current) => [...current, ...picked.map((file) => ({ name: file.name, size: file.size }))]);
          toast.success(picked.length === 1 ? "Arquivo enviado" : `${picked.length} arquivos enviados`);
        }}
      />
      <div>
        {files.map((file) => (
          <FileRow
            key={file.name}
            name={file.name}
            detail={`${Math.max(1, Math.round(file.size / KB))} KB · enviado hoje`}
            onDownload={() => toast("Baixando…")}
            onRemove={() => setFiles((current) => current.filter((item) => item.name !== file.name))}
          />
        ))}
      </div>
    </div>
  );
}