Gestion des fichiers

Dropup offre une expérience transparente pour la gestion des fichiers depuis le moment où ils sont sélectionnés jusqu'à leur téléchargement.

Méthodes de sélection de fichiers

Glisser-déposer

Utilisez getDropProps() pour activer le glisser-déposer sur n'importe quel élément :

function DropZone() {
  const { getDropProps, getInputProps, state } = useDropup();

  return (
    <div
      {...getDropProps()}
      style={{
        border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
        backgroundColor: state.isDragging ? '#f0f8ff' : 'transparent',
      }}
    >
      <input {...getInputProps()} />
      <p>Drop files here</p>
    </div>
  );
}

Cliquer pour sélectionner

La zone de dépôt est également cliquable par défaut :

<div {...getDropProps()}>
  <input {...getInputProps()} />
  <p>Click or drag files here</p>
</div>

Sélection programmatique

Ouvrez la boîte de dialogue de fichier par programmation :

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  Select Files
</button>

Ajout programmatique de fichiers

Ajoutez des fichiers directement (utile pour les événements de collage ou les intégrations) :

const { actions } = useDropup();

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

Structure de l'objet fichier

Chaque fichier dans le tableau files a cette structure :

interface DropupFile {
  // Identification
  id: string;              // Identifiant unique (généré automatiquement)
  file: File;              // Objet File original du navigateur

  // Métadonnées
  name: string;            // Nom du fichier
  size: number;            // Taille en octets
  type: string;            // Type MIME (par ex., "image/png")

  // Aperçu (pour les images)
  preview?: string;        // URL d'objet pour l'aperçu

  // État du téléchargement
  status: FileStatus;      // 'idle' | 'uploading' | 'complete' | 'error' | 'paused'
  progress: number;        // 0-100

  // Résultats
  uploadedUrl?: string;    // URL après un téléchargement réussi
  response?: unknown;      // Réponse du serveur
  error?: DropupError;     // Détails de l'erreur en cas d'échec

  // Données personnalisées
  meta?: Record<string, unknown>;
}

Cycle de vie du statut des fichiers

idle → uploading → complete
                 ↘ error → (retry) → uploading
                 ↘ paused → (resume) → uploading

Valeurs de statut

Statut	Description
`idle`	Fichier ajouté mais pas encore en cours de téléchargement
`uploading`	Téléchargement en cours
`complete`	Téléchargement réussi
`error`	Échec du téléchargement
`paused`	Téléchargement en pause (pour les téléchargements reprenables)

Travailler avec les fichiers

Accéder aux fichiers

const { files } = useDropup();

// Tous les fichiers
console.log(files);

// Filtrer par statut
const uploading = files.filter(f => f.status === 'uploading');
const completed = files.filter(f => f.status === 'complete');
const failed = files.filter(f => f.status === 'error');

Supprimer des fichiers

const { files, actions } = useDropup();

// Supprimer un seul fichier
actions.remove(files[0].id);

// Supprimer tous les fichiers
actions.reset();

Mettre à jour les métadonnées du fichier

const { actions } = useDropup();

// Ajouter des métadonnées personnalisées
actions.updateFileMeta(fileId, {
  customField: 'value',
  category: 'documents',
});

Aperçus de fichiers

Pour les fichiers image, Dropup peut générer des URL d'aperçu :

const { files } = useDropup({
  generatePreviews: true, // par défaut : true
});

// Utiliser l'aperçu dans votre interface utilisateur
{files.map(file => (
  file.preview && (
    <img
      src={file.preview}
      alt={file.name}
      style={{ maxWidth: 100, maxHeight: 100 }}
    />
  )
))}

Gestion de la mémoire

Les URL d'aperçu sont des URL d'objet qui consomment de la mémoire. Dropup les révoque automatiquement lorsque les fichiers sont supprimés ou que le composant est démonté.

Formatage de la taille des fichiers

Aide pour afficher les tailles de fichiers :

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Utilisation
{files.map(file => (
  <span>{formatFileSize(file.size)}</span>
))}