Validation des fichiers

Dropup fournit une validation complète des fichiers pour garantir que seuls les fichiers valides sont acceptés.

Options de validation

Accept (Types de fichiers)

Spécifiez quels types de fichiers accepter :

// Accepter uniquement les images
useDropup({ accept: 'image/*' });

// Accepter des types spécifiques
useDropup({ accept: 'image/png, image/jpeg' });

// Accepter par extension
useDropup({ accept: '.pdf, .doc, .docx' });

// Plusieurs catégories
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });

Modèles Accept courants

Modèle	Description
image/*	Toutes les images
image/png, image/jpeg	PNG et JPEG uniquement
video/*	Toutes les vidéos
audio/*	Tous les fichiers audio
application/pdf	Fichiers PDF uniquement
.doc, .docx	Documents Word
*/*	Tous les fichiers (par défaut)

Limites de taille de fichier

useDropup({
  maxSize: 10 * 1024 * 1024, // 10MB maximum
  minSize: 1024,              // 1KB minimum
});

Limite du nombre de fichiers

useDropup({
  maxFiles: 5, // Maximum 5 fichiers
});

Limites de dimensions d'image

useDropup({
  accept: 'image/*',
  maxWidth: 4096,   // Largeur maximale en pixels
  maxHeight: 4096,  // Hauteur maximale en pixels
  minWidth: 100,    // Largeur minimale en pixels
  minHeight: 100,   // Hauteur minimale en pixels
});

Règles de validation personnalisées

Créez une logique de validation personnalisée :

useDropup({
  customRules: [
    // Règle 1 : Vérifier la longueur du nom de fichier
    (file) => {
      if (file.name.length > 100) {
        return 'Filename must be less than 100 characters';
      }
      return true;
    },

    // Règle 2 : Vérifier un contenu spécifique
    (file) => {
      if (file.name.includes('draft')) {
        return 'Draft files are not allowed';
      }
      return true;
    },

    // Règle 3 : Validation asynchrone
    async (file) => {
      const hash = await calculateHash(file);
      const exists = await checkDuplicate(hash);
      if (exists) {
        return 'This file has already been uploaded';
      }
      return true;
    },
  ],
});

Valeurs de retour des règles

Valeur de retour	Signification
true	Validation réussie
false	Validation échouée (erreur générique)
string	Validation échouée avec message personnalisé

Gestion des erreurs de validation

Utilisez le callback onValidationError :

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,
  onValidationError: (errors) => {
    errors.forEach(({ file, errors: fileErrors }) => {
      console.log(`${file.name} failed validation:`);
      fileErrors.forEach(error => console.log(`  - ${error}`));
    });

    // Afficher un message convivial
    toast.error(`${errors.length} file(s) failed validation`);
  },
});

Structure d'erreur de validation

interface ValidationError {
  file: File;              // Le fichier qui a échoué
  errors: string[];        // Tableau de messages d'erreur
}

Règles de validation prédéfinies

Dropup inclut des règles de validation courantes :

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

useDropup({
  customRules: [
    commonRules.noExecutables,     // Bloquer .exe, .bat, etc.
    commonRules.noHiddenFiles,     // Bloquer les fichiers commençant par .
    commonRules.maxFilenameLength(50),
    commonRules.allowedExtensions(['.jpg', '.png', '.pdf']),
  ],
});

Retour de validation lors du glissement

Fournissez un retour visuel pendant le glissement :

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

  // state.isDragAccept - les fichiers correspondent aux critères d'acceptation
  // state.isDragReject - les fichiers ne correspondent pas

  return (
    <div
      {...getDropProps()}
      style={{
        borderColor: state.isDragAccept
          ? 'green'
          : state.isDragReject
          ? 'red'
          : 'gray',
      }}
    >
      {state.isDragReject && <p>File type not accepted!</p>}
    </div>
  );
}

Exemple de validation complète

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

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

    // Limites de taille
    maxSize: 10 * 1024 * 1024, // 10MB
    minSize: 100,              // 100 octets (empêcher les fichiers vides)

    // Limite de nombre
    maxFiles: 10,

    // Dimensions d'image (pour les images uniquement)
    maxWidth: 8000,
    maxHeight: 8000,

    // Règles personnalisées
    customRules: [
      commonRules.noExecutables,
      commonRules.maxFilenameLength(100),

      // Personnalisé : pas de fichiers avec des espaces
      (file) => {
        if (file.name.includes(' ')) {
          return 'Filenames cannot contain spaces';
        }
        return true;
      },
    ],

    // Gestion des erreurs
    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>❌ Some files will be rejected</p>
      ) : (
        <p>📁 Drop files here (JPEG, PNG, PDF only, max 10MB)</p>
      )}
    </div>
  );
}