Léger
Le package principal fait moins de 10KB compressé. Modulaire pour une taille optimale.
TypeScript
Écrit en TypeScript avec des définitions de types complètes.
Zéro dépendance
Aucune dépendance d'exécution. Nécessite uniquement React comme dépendance de pair.
Fonctionnalités
Conception headless
Aucun composant UI intégré. Vous avez un contrôle total sur l'apparence. Créez l'expérience de téléchargement exactement comme vous le souhaitez.
Glisser-déposer
Sélection de fichiers intuitive par glisser-déposer avec retour visuel pour les types de fichiers valides et invalides pendant le glissement.
Progression du téléchargement
Suivi en temps réel de la progression des fichiers individuels et de la progression globale du téléchargement. Créez de belles barres de progression.
Validation des fichiers
Validation intégrée des types de fichiers, tailles et dimensions. Ajoutez des règles de validation personnalisées pour vos besoins spécifiques.
Stockage cloud
Téléchargez directement vers S3, Google Cloud Storage, Azure Blob et plus encore en utilisant des URL pré-signées. Aucun proxy serveur nécessaire.
Téléchargements fragmentés
Divisez les gros fichiers en morceaux pour un téléchargement fiable. Prise en charge du téléchargement repris avec le protocole tus.
Traitement d'images
Compressez, redimensionnez et recadrez les images avant le téléchargement. Corrigez automatiquement les problèmes d'orientation EXIF.
React Native
Fonctionne dans React Native avec l'adaptateur natif. Même API pour les applications web et mobiles.
Compatible SSR
Fonctionne parfaitement avec Next.js, Remix et d'autres frameworks SSR. Aucun problème d'hydratation.
Démarrage rapide
1. Installation
npm install @samithahansaka/dropup
2. Utilisation
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}