File Upload Area

Upload de Arquivos

Área de upload com drag & drop, validação de tipo e preview do arquivo selecionado.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add file-upload-area

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Exemplo Interativo

Experimente diferentes tipos de upload

Upload de Imagem

Clique para selecionar ou arraste o arquivo

PNG, JPG, GIF até 10MB

Upload de PDF

Clique para selecionar ou arraste o arquivo

Apenas arquivos PDF

Upload Geral

Clique para selecionar ou arraste o arquivo

Qualquer tipo de arquivo

Exemplos Avançados

Funcionalidades avançadas como múltiplos arquivos e callbacks

Upload Múltiplo de Imagens

Clique para selecionar ou arraste os arquivos

Selecione várias imagens de uma vez

Upload Misto (PDF + Imagens)

Clique para selecionar ou arraste os arquivos

Aceita PDFs e imagens

Upload com Callback

Clique para selecionar ou arraste o arquivo

Veja o console para os arquivos selecionados

Uso Básico

Implementação simples do File Upload Area

import { FileUploadArea } from "@/components/ui/file-upload-area";
import { Image } from "lucide-react";

export function FileUploadExample() {
  return (
    <FileUploadArea
      accept="image/*"
      label="Upload de Imagem"
      description="PNG, JPG, GIF até 10MB"
      icon={<Image className="h-8 w-8 text-foreground" />}
    />
  );
}

Uso Avançado

Upload múltiplo e callbacks para maior controle

Upload Múltiplo

import { FileUploadArea } from "@/components/ui/file-upload-area";
import { Image } from "lucide-react";

export function MultipleFileUpload() {
  return (
    <FileUploadArea
      accept="image/*"
      label="Upload Múltiplo de Imagens"
      description="Selecione várias imagens de uma vez"
      icon={<Image className="h-8 w-8 text-foreground" />}
      multiple={true}
      onFileChange={(files) => {
        console.log("Arquivos selecionados:", files);
        // Faça algo com os arquivos, como enviar para o servidor
      }}
    />
  );
}

Upload Misto com Callback

import { FileUploadArea } from "@/components/ui/file-upload-area";
import { FileText } from "lucide-react";

export function MixedFileUpload() {
  const handleFileChange = (files: File[]) => {
    console.log(`Recebidos ${files.length} arquivos:`);
    files.forEach((file, index) => {
      console.log(`${index + 1}. ${file.name} - ${(file.size / 1024 / 1024).toFixed(2)} MB`);
    });

    // Aqui você pode:
    // - Validar tamanho dos arquivos
    // - Enviar para API
    // - Mostrar preview
    // - Atualizar estado do componente pai
  };

  return (
    <FileUploadArea
      accept="application/pdf,image/*"
      label="Documentos e Imagens"
      description="Aceita PDFs e imagens"
      icon={<FileText className="h-8 w-8 text-foreground" />}
      multiple={true}
      dashed
      onFileChange={handleFileChange}
    />
  );
}

Props

Propriedades disponíveis para o componente

Prop	Tipo	Descrição
accept	string	Tipos de arquivo aceitos (ex: "image/*", "application/pdf")
label	string	Rótulo do campo
description	string	Descrição/instruções
icon	React.ReactNode	Ícone a ser exibido
dashed	boolean	Estilo de borda tracejada diferente
multiple	boolean	Permite seleção de múltiplos arquivos
onFileChange	(files: File[]) => void	Callback chamado quando arquivos são selecionados

Recursos

Funcionalidades do componente

✓Drag & drop de arquivos
✓Clique para selecionar arquivo
✓Validação de tipo de arquivo
✓Preview do arquivo selecionado
✓Botão para remover arquivo
✓Indicação visual de drag over
✓Exibição do tamanho do arquivo
✓Suporte a múltiplos arquivos
✓Callback onFileChange para controle
✓Botão "Remover todos" para múltiplos arquivos
✓Validação de tipos mistos (PDF + imagens)