Comment ajouter le téléversement de fichiers à votre app : stockage, limites et sécurité

Pour ajouter le téléversement de fichiers à votre app, stockez les fichiers dans un stockage d'objets (un bucket), et non sur le disque de votre serveur ni dans votre base de données, puis enregistrez dans la base un petit enregistrement avec la clé du fichier, son nom, sa taille, son type et son propriétaire. Vérifiez la taille et le type du fichier côté serveur, décidez dès le départ si les fichiers sont publics (comme des photos de produits) ou privés (comme des factures), et ne servez les fichiers privés qu'après avoir vérifié qui fait la demande. Dans un outil de création d'app par IA, vous pouvez décrire la fonctionnalité de téléversement en un seul prompt ; l'essentiel est de tester que les fichiers survivent à un redéploiement et qu'ils ne peuvent pas être ouverts par la mauvaise personne.

Définissez le type de téléversements dont vous avez besoin

Avant de construire, répondez à trois questions :

1. Quels fichiers ? Photos de profil, images de produits, PDF, tableurs, audio, vidéo. Cela détermine les limites de type et de taille.
2. Qui peut les voir ? Tout le monde (une galerie publique) ou seulement l'auteur du téléversement et les administrateurs (contrats, pièces d'identité, dossiers clients).
3. Que se passe-t-il après le téléversement ? Simple stockage, affichage d'un aperçu, redimensionnement des images, ou lecture du contenu.

Les images publiques et les documents privés demandent des configurations différentes ; réglez donc cette question en premier.

Où stocker les fichiers

Pour la plupart des apps, un stockage d'objets plus un enregistrement en base est la bonne réponse. La ligne de la base est ce que votre app interroge (« afficher les documents de cet utilisateur ») ; le bucket ne fait que contenir les octets.

Fichiers publics ou privés

• Les fichiers publics (photos de produits, images de blog, avatars) peuvent être servis depuis une URL publique. Toute personne disposant du lien peut les ouvrir, ce qui convient à ce type de contenu.
• Les fichiers privés (factures, contrats, documents médicaux ou pièces d'identité, livrables clients) ne doivent jamais avoir une URL publique devinable. Le serveur vérifie que l'utilisateur connecté en est le propriétaire ou a la permission, puis il les renvoie en flux ou fournit une URL signée, c'est-à-dire un lien qui ne fonctionne que pendant un court moment.

Un bug courant et grave consiste à stocker des fichiers privés dans un bucket public avec des noms prévisibles. Quiconque devine /uploads/invoice-102.pdf obtient la facture de quelqu'un d'autre.

Exemples de prompts

Téléversement d'une image publique :

Permets aux administrateurs de téléverser jusqu'à 5 photos de produit par produit. Accepte les JPG, PNG et WebP jusqu'à 5 Mo chacun. Stocke les fichiers dans le stockage de fichiers, enregistre la clé, la taille et l'ordre de chaque fichier dans une table product_images, et affiche des miniatures avec un bouton de suppression. Valide le type et la taille côté serveur, et pas seulement dans le navigateur.

Téléversement d'un document privé :

Ajoute une page Documents pour les clients connectés. Les clients peuvent téléverser des PDF jusqu'à 20 Mo. Les fichiers sont privés : stocke-les dans le stockage de fichiers, enregistre l'ID du propriétaire, le nom de fichier d'origine, la taille et l'heure de téléversement dans une table documents, et ne permets qu'au propriétaire et aux administrateurs de les télécharger. Les téléchargements passent par une route serveur qui vérifie la permission. N'expose jamais d'URL publique pour ces fichiers.

Suites utiles :

Affiche une barre de progression pendant le téléversement, et un message d'erreur clair si le fichier est trop volumineux ou du mauvais type.

Quand une ligne de document est supprimée, supprime aussi le fichier stocké.

Étape par étape

1. Définissez les types et les limites de taille pour chaque champ de téléversement. Soyez précis : « PDF jusqu'à 20 Mo », et non « documents ».
2. Activez le stockage. Dans un outil de création par IA, demandez les téléversements et il configurera le stockage ; ailleurs, créez un bucket et ajoutez ses identifiants comme secrets côté serveur.
3. Créez une table pour les enregistrements de fichiers : ID, propriétaire, clé de stockage, nom d'origine, type, taille, date de création.
4. Construisez la route de téléversement côté serveur : vérifiez que l'utilisateur est connecté, contrôlez le type et la taille, générez une clé de stockage sûre (et non le nom saisi par l'utilisateur), enregistrez le fichier, insérez l'enregistrement.
5. Construisez le chemin de téléchargement ou d'affichage : URL publique pour les fichiers publics ; route avec contrôle de permission ou URL signée pour les fichiers privés.
6. Construisez l'interface : sélecteur de fichier, glisser-déposer si utile, progression, aperçus, erreurs.
7. Gérez les suppressions pour que retirer un enregistrement retire aussi le fichier stocké.
8. Testez : téléversez, rechargez, redéployez ou publiez, et vérifiez que le fichier se charge toujours. Puis connectez-vous avec un autre utilisateur et essayez d'ouvrir le fichier privé du premier.

Erreurs courantes

• Écrire les téléversements sur le disque du serveur. Cela fonctionne en développement, puis les fichiers disparaissent après un redémarrage ou un redéploiement.
• Faire confiance aux contrôles du navigateur. Le paramètre « accept » d'un champ de fichier est une indication, pas une sécurité. Contrôlez le type et la taille côté serveur.
• Utiliser le nom de fichier de l'utilisateur comme clé de stockage. Les noms entrent en collision et peuvent contenir des caractères étranges. Générez une clé unique et conservez le nom d'origine séparément.
• Des buckets publics pour des fichiers privés. Voir ci-dessus ; c'est celui qui fait les gros titres.
• Autoriser n'importe quel type de fichier. Des fichiers HTML ou SVG servis depuis votre domaine peuvent exécuter des scripts dans certaines configurations. N'acceptez que les types dont vous avez besoin.
• Aucune limite de taille. Un seul téléversement énorme peut épuiser votre quota de stockage ou faire expirer la requête.
• Fichiers orphelins. Supprimer la ligne de la base sans le fichier remplit peu à peu un stockage que vous payez.
• Oublier le mobile. Les photos de téléphone peuvent être volumineuses et dans des formats comme HEIC ; décidez si vous les acceptez ou si vous les convertissez.

Checklist

• Les fichiers vont dans le stockage d'objets, pas sur le disque du serveur ni dans la base
• Chaque fichier a un enregistrement en base avec propriétaire, clé, nom, type et taille
• Type et taille contrôlés côté serveur
• Les clés de stockage sont générées, et non reprises du nom de fichier
• Les fichiers privés ne sont servis qu'après un contrôle de permission
• Un autre utilisateur ne peut pas ouvrir vos fichiers privés, même avec le lien
• La suppression d'un enregistrement supprime le fichier
• Les fichiers se chargent toujours après publication ou redéploiement
• Les erreurs de téléversement sont affichées clairement, y compris sur téléphone

Le téléversement de fichiers dans Mythex

Mythex peut activer automatiquement le stockage de fichiers pour un projet lorsque votre app a besoin de téléversements, sans que vous ayez à créer un bucket à la main. Vous pouvez aussi taper /storage dans le chat. Il est disponible sur Free et Pro, avec une limite de 1 Go sur Free, et vous pouvez voir son état dans Paramètres → Stockage.

La documentation précise que l'hébergement publié n'est pas un système de fichiers local durable ; demandez donc à l'agent d'utiliser le stockage de la plateforme plutôt que d'enregistrer sur disque. Le stockage des fichiers et les téléchargements sont facturés sur votre solde de crédits, selon la taille et la quantité téléchargée ; Pro paie la moitié du tarif Free. Voir Stockage de fichiers dans la documentation.

Le téléversement va en général de pair avec une base de données pour les enregistrements de fichiers et une connexion pour les fichiers privés. Si vous construisez un espace où des clients échangent des documents, consultez comment créer un portail client, et passez en revue la checklist de sécurité avant le lancement.

Questions