Aller au contenu principal

Questions fréquemment posées

Questions et réponses courantes sur Dropup.

Général​

Qu'est-ce que Dropup ?​

Dropup est une bibliothèque React légère et headless pour le téléchargement de fichiers. Elle fournit la fonctionnalité de glisser-déposer, la validation des fichiers, le suivi de la progression du téléchargement et le support du stockage cloud - le tout dans un package de moins de 10KB compressé.

Pourquoi "headless" ?​

Headless signifie que Dropup n'inclut aucun composant UI. Elle fournit la logique et la gestion d'état, tandis que vous construisez l'interface comme vous le souhaitez. Cela vous donne un contrôle total sur l'apparence.

Quelle est la taille du bundle ?​

  • Core (@samithahansaka/dropup) : < 10KB compressé
  • Avec support cloud : +2KB par fournisseur
  • Avec traitement d'images : +5KB
  • Avec protocole tus : +3KB (nécessite tus-js-client comme dépendance de pair)

Est-ce que TypeScript est supporté ?​

Oui ! Dropup est écrit en TypeScript et inclut des définitions de types complètes. Aucun package @types nécessaire.

Quelle version de React est requise ?​

React 16.8+ (nécessite le support des hooks).

Utilisation​

Comment télécharger des fichiers ?​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// Télécharger tous les fichiers
actions.upload();

// Télécharger des fichiers spécifiques
actions.upload(['file-id-1', 'file-id-2']);

Comment gérer les erreurs de validation ?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

Puis-je utiliser une logique de téléchargement personnalisée ?​

Oui ! Passez une fonction au lieu d'un objet de configuration :

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // Votre logique de téléchargement personnalisée
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

Comment ajouter des fichiers programmatiquement ?​

const { actions } = useDropup();

// Depuis le presse-papiers
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

Puis-je avoir plusieurs zones de dépôt ?​

Oui ! Chaque appel à useDropup crée une instance indépendante :

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// Utilisez-les séparément
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

Téléchargements​

Comment afficher la progression du téléchargement ?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

Comment annuler un téléchargement ?​

const { actions } = useDropup();

// Annuler un fichier spécifique
actions.cancel('file-id');

// Annuler tous les téléchargements
actions.cancel();

Comment réessayer les téléchargements échoués ?​

const { actions } = useDropup();

// Réessayer des fichiers spécifiques
actions.retry(['file-id']);

// Réessayer tous les échecs
actions.retry();

Est-ce que les téléchargements fragmentés sont supportés ?​

Oui ! Utilisez createChunkedUploader :

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

Puis-je télécharger directement vers S3 ?​

Oui ! Utilisez le téléchargeur cloud :

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3/presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name }),
      });
      return res.json();
    },
  }),
});

Validation​

Comment restreindre les types de fichiers ?​

// Par type MIME
useDropup({ accept: 'image/*' });

// Par extension
useDropup({ accept: '.pdf, .doc' });

// Multiples
useDropup({ accept: ['image/*', 'application/pdf'] });

Comment définir des limites de taille ?​

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

Comment limiter le nombre de fichiers ?​

useDropup({
  maxFiles: 5,
});

Puis-je ajouter une validation personnalisée ?​

Oui ! Utilisez customRules :

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'Les fichiers brouillon ne sont pas autorisés';
      }
      return true;
    },
  ],
});

Aperçus​

Comment afficher les aperçus d'images ?​

Les aperçus sont activés par défaut :

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

Dois-je nettoyer les URLs d'aperçu ?​

Non ! Dropup révoque automatiquement les Object URLs lorsque les fichiers sont supprimés ou que le composant est démonté.

Puis-je désactiver les aperçus ?​

useDropup({ generatePreviews: false });

Dépannage​

Les fichiers ne se téléchargent pas​

  1. Vérifiez que upload est configuré :

    useDropup({ upload: { url: '/api/upload' } });

  2. Assurez-vous d'appeler actions.upload() (sauf si autoUpload: true)

  3. Vérifiez la console du navigateur pour les erreurs réseau

Les URLs d'aperçu ne fonctionnent pas​

  1. Assurez-vous que le fichier est une image
  2. Vérifiez que generatePreviews n'est pas false
  3. Vérifiez que l'objet fichier a une propriété preview valide

Le glisser-déposer ne fonctionne pas​

  1. Assurez-vous de propager getDropProps() sur un élément conteneur
  2. Incluez l'input caché : <input {...getInputProps()} />
  3. Vérifiez que disabled n'est pas true

Erreurs TypeScript​

  1. Mettez à jour vers la dernière version de Dropup
  2. Assurez-vous que tsconfig.json a la bonne moduleResolution
  3. Vérifiez que @samithahansaka/dropup est dans dependencies, pas devDependencies

Fuites de mémoire​

  1. Assurez-vous que les composants utilisant useDropup se démontent correctement
  2. Appelez actions.reset() avant le démontage si nécessaire
  3. Ne stockez pas les fichiers dans un état externe sans nettoyage

Compatibilité​

Est-ce que ça fonctionne avec Next.js ?​

Oui ! Utilisez la directive 'use client' :

'use client';
import { useDropup } from '@samithahansaka/dropup';

Est-ce que ça fonctionne avec React Native ?​

Oui ! Utilisez l'adaptateur natif :

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

Est-ce que le SSR est supporté ?​

Oui ! Dropup est compatible SSR. Il n'utilise les APIs du navigateur que lorsqu'elles sont disponibles.

Support des navigateurs ?​

Tous les navigateurs modernes :

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

Contribution​

Comment puis-je contribuer ?​

  1. Forkez le dépôt
  2. Créez une branche de fonctionnalité
  3. Soumettez une pull request

Voir CONTRIBUTING.md pour les détails.

Comment signaler des bugs ?​

Ouvrez une issue sur github.com/samithahansaka/dropup/issues.

Y a-t-il une feuille de route ?​

Consultez les issues et discussions GitHub pour les fonctionnalités planifiées.