Validação de Arquivos

O Dropup oferece validação abrangente de arquivos para garantir que apenas arquivos válidos sejam aceitos.

Opções de Validação

Accept (Tipos de Arquivo)

Especifique quais tipos de arquivo aceitar:

// Aceitar apenas imagens
useDropup({ accept: 'image/*' });

// Aceitar tipos específicos
useDropup({ accept: 'image/png, image/jpeg' });

// Aceitar por extensão
useDropup({ accept: '.pdf, .doc, .docx' });

// Múltiplas categorias
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });

Padrões Comuns de Accept

Padrão	Descrição
image/*	Todas as imagens
image/png, image/jpeg	Apenas PNG e JPEG
video/*	Todos os vídeos
audio/*	Todos os arquivos de áudio
application/pdf	Apenas arquivos PDF
.doc, .docx	Documentos Word
*/*	Todos os arquivos (padrão)

Limites de Tamanho de Arquivo

useDropup({
  maxSize: 10 * 1024 * 1024, // Máximo 10MB
  minSize: 1024,              // Mínimo 1KB
});

Limite de Quantidade de Arquivos

useDropup({
  maxFiles: 5, // Máximo de 5 arquivos
});

Limites de Dimensão de Imagem

useDropup({
  accept: 'image/*',
  maxWidth: 4096,   // Largura máxima em pixels
  maxHeight: 4096,  // Altura máxima em pixels
  minWidth: 100,    // Largura mínima em pixels
  minHeight: 100,   // Altura mínima em pixels
});

Regras de Validação Personalizadas

Crie lógica de validação personalizada:

useDropup({
  customRules: [
    // Regra 1: Verificar tamanho do nome do arquivo
    (file) => {
      if (file.name.length > 100) {
        return 'O nome do arquivo deve ter menos de 100 caracteres';
      }
      return true;
    },

    // Regra 2: Verificar conteúdo específico
    (file) => {
      if (file.name.includes('draft')) {
        return 'Arquivos de rascunho não são permitidos';
      }
      return true;
    },

    // Regra 3: Validação assíncrona
    async (file) => {
      const hash = await calculateHash(file);
      const exists = await checkDuplicate(hash);
      if (exists) {
        return 'Este arquivo já foi enviado';
      }
      return true;
    },
  ],
});

Valores de Retorno das Regras

Valor de Retorno	Significado
true	Validação passou
false	Validação falhou (erro genérico)
string	Validação falhou com mensagem personalizada

Tratando Erros de Validação

Use o callback onValidationError:

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,
  onValidationError: (errors) => {
    errors.forEach(({ file, errors: fileErrors }) => {
      console.log(`${file.name} falhou na validação:`);
      fileErrors.forEach(error => console.log(`  - ${error}`));
    });

    // Mostrar mensagem amigável ao usuário
    toast.error(`${errors.length} arquivo(s) falharam na validação`);
  },
});

Estrutura do Erro de Validação

interface ValidationError {
  file: File;              // O arquivo que falhou
  errors: string[];        // Array de mensagens de erro
}

Regras de Validação Pré-construídas

O Dropup inclui regras de validação comuns:

import { commonRules } from '@samithahansaka/dropup';

useDropup({
  customRules: [
    commonRules.noExecutables,     // Bloquear .exe, .bat, etc.
    commonRules.noHiddenFiles,     // Bloquear arquivos começando com .
    commonRules.maxFilenameLength(50),
    commonRules.allowedExtensions(['.jpg', '.png', '.pdf']),
  ],
});

Feedback Visual Durante Arraste

Forneça feedback visual durante o arraste:

function DropZone() {
  const { getDropProps, state } = useDropup({
    accept: 'image/*',
  });

  // state.isDragAccept - arquivos correspondem aos critérios de accept
  // state.isDragReject - arquivos não correspondem

  return (
    <div
      {...getDropProps()}
      style={{
        borderColor: state.isDragAccept
          ? 'green'
          : state.isDragReject
          ? 'red'
          : 'gray',
      }}
    >
      {state.isDragReject && <p>Tipo de arquivo não aceito!</p>}
    </div>
  );
}

Exemplo Completo de Validação

import { useDropup, commonRules } from '@samithahansaka/dropup';

function UploaderSeguro() {
  const { files, state, getDropProps, getInputProps } = useDropup({
    // Tipo de arquivo
    accept: ['image/jpeg', 'image/png', 'application/pdf'],

    // Limites de tamanho
    maxSize: 10 * 1024 * 1024, // 10MB
    minSize: 100,              // 100 bytes (prevenir arquivos vazios)

    // Limite de quantidade
    maxFiles: 10,

    // Dimensões de imagem (apenas para imagens)
    maxWidth: 8000,
    maxHeight: 8000,

    // Regras personalizadas
    customRules: [
      commonRules.noExecutables,
      commonRules.maxFilenameLength(100),

      // Personalizado: sem arquivos com espaços
      (file) => {
        if (file.name.includes(' ')) {
          return 'Nomes de arquivo não podem conter espaços';
        }
        return true;
      },
    ],

    // Tratamento de erros
    onValidationError: (errors) => {
      errors.forEach(({ file, errors }) => {
        alert(`${file.name}: ${errors.join(', ')}`);
      });
    },
  });

  return (
    <div
      {...getDropProps()}
      className={`dropzone ${
        state.isDragReject ? 'reject' : state.isDragAccept ? 'accept' : ''
      }`}
    >
      <input {...getInputProps()} />
      {state.isDragReject ? (
        <p>Alguns arquivos serão rejeitados</p>
      ) : (
        <p>Solte arquivos aqui (apenas JPEG, PNG, PDF, máx 10MB)</p>
      )}
    </div>
  );
}