# La page de livraison

> La page que votre client ouvre : un aperçu, puis valider ou demander des corrections. Un template Next.js sur votre propre bucket, avec mots de passe, suppression après téléchargement, gros envois reprenables et webhooks signés. Essayez la démo, déployez-la sur Vercel.

Canonical: https://colis-site.vercel.app/drop · Markdown: https://colis-site.vercel.app/drop.md · English: https://colis-site.vercel.app/en/drop

Déposez un fichier, obtenez un code, un lien et un QR code. Votre client l’ouvre, voit le fichier, puis le valide ou demande des corrections, pendant que votre page affiche la réponse dès qu’elle arrive. Un template Next.js sur votre propre bucket, déployé sur Vercel depuis le dépôt.

- Essayer la démo: https://colis-tau.vercel.app
- Le template sur GitHub: https://github.com/mamadouwhile/colis/tree/main/templates/drop
- Lire le README: https://github.com/mamadouwhile/colis/blob/main/templates/drop/README.md

## Deux pages, et les routes entre elles.
La page d’envoi, la page de retrait, et les routes de transfert avec l’accusé de réception par-dessus. Tout est à vous, restylez à volonté.

- **Préparé avant de partir** — Choisir un fichier affiche ce qu’il est et un formulaire : la durée de vie, un mot de passe pour ce colis, la suppression au premier téléchargement, le nom de téléchargement, l’appareil d’envoi, et une note de 280 caractères au plus. Rien ne quitte la machine avant que vous cliquiez sur envoyer.
- **Une étiquette d’expédition** — Le résultat imprime le code sur une étiquette avec un code-barres Code 39, le lien à partager, et un QR code de ce lien pour un téléphone.
- **La page de retrait** — `/K7QP2M4X` montre le fichier avant tout enregistrement : une image, une vidéo, de l’audio, un PDF, les premières lignes d’un texte. Puis ce qu’on en sait : la taille, le type, le temps restant, la note de l’expéditeur.
- **Valider ou demander des corrections** — Sous l’aperçu, une question : le fichier correspond-il à ce qui était attendu ? « Valider la livraison », ou demander des corrections et dire lesquelles, en 1 000 caractères au plus. Une réponse, définitive.
- **Votre suivi** — Votre page d’envoi suit l’accusé de réception toute seule : envoyé, ouvert, puis le verdict, tamponné « Validé » ou « À corriger », avec le commentaire du client.
- **Gros fichiers, reprenables** — Au-delà de `DROP_MAX_SIZE_MB`, le navigateur envoie directement à votre bucket par morceaux de 8 Mio, jusqu’à `DROP_MAX_UPLOAD_MB`, et reprend un envoi interrompu là où il s’était arrêté.

## Cinq variables, une règle de cycle de vie.
Tant que les paquets @colis ne sont pas sur npm, la page se construit depuis le monorepo : importez tout le dépôt sur Vercel, pas seulement le dossier du template.

**l’environnement**
```sh
COLIS_BUCKET=livraisons
COLIS_ENDPOINT=https://<account-id>.r2.cloudflarestorage.com
COLIS_REGION=auto
AWS_ACCESS_KEY_ID=…
AWS_SECRET_ACCESS_KEY=…

# optional
DROP_PASSWORD=…              # asked before an upload, never for a pickup
DROP_EXPIRES_IN=86400        # the default lifetime, in seconds
DROP_MAX_EXPIRES_IN=604800   # the longest a sender may choose
DROP_MAX_SIZE_MB=4           # through the function, under Vercel's limit
DROP_MAX_UPLOAD_MB=2048      # above that, straight to the bucket, in parts
DROP_WEBHOOK_URL=…           # where the signed events go
DROP_WEBHOOK_SECRET=…        # and what signs them
```

1. Créez un bucket sur R2, S3, Scaleway, Wasabi ou un MinIO que vous hébergez, et une paire de clés avec lecture et écriture sur ce bucket, rien de plus.
2. Sur Vercel, Add New → Project, puis choisissez le dépôt. Réglez le Root Directory sur `templates/drop` et laissez « Include files outside the root directory » activé : son `vercel.json` installe avec Bun à la racine et construit d’abord les paquets.
3. Collez les cinq variables, et `DROP_PASSWORD` pour que des inconnus ne remplissent pas votre bucket.
4. Ajoutez une règle de cycle de vie qui supprime les objets sous le préfixe (`drop/` par défaut) après un jour ou deux, et une règle CORS pour les gros fichiers.
5. Lancez `colis verifier --remote https://votre-deploiement.vercel.app/api/transfers --token <mot de passe>` et regardez-le faire l’aller-retour d’un vrai colis.

**ou lancez-la en local**
```sh
git clone https://github.com/mamadouwhile/colis.git && cd colis
bun install && bun run build
cp templates/drop/.env.example templates/drop/.env.local   # point it at a bucket
bun run --filter colis-drop dev                               # http://localhost:3400
```

## Ce qu’elle ne fait pas.
- **Ni comptes, ni historique** — Un code vaut accès, avec une expiration. Il n’y a pas de liste des colis passés ; l’accusé de chacun vit aussi longtemps que la plus longue durée de vie du déploiement.
- **Un fichier par code** — Compressez d’abord un dossier. Depuis un terminal, c’est une ligne : `tar cz ./dossier | colis envoyer - --name dossier.tar.gz`.
- **Un aperçu coûte un téléchargement** — Les octets passent par la fonction dans tous les cas : `DROP_PREVIEW_MAX_MB` le plafonne et `DROP_PREVIEW=false` le désactive. Un fichier envoyé n’est jamais servi comme une page que ce domaine exécuterait.