Résoudre les problèmes d’envoi d’images

Commencez avec un seul petit PNG. Ouvrez le panneau Réseau de votre navigateur, insérez l’image et suivez la requête depuis l’envoi jusqu’au document enregistré. Faites-le dans un document de test, pas dans le brouillon d’un client.

Première configuration : choisir où vivent les images

L’éditeur insère le contenu ; c’est votre application qui stocke les fichiers envoyés. Choisissez un dossier persistant ou un stockage objet, configurez un point de terminaison d’envoi et renvoyez une URL d’image accessible depuis le navigateur. Un chemin sur le disque du serveur n’est pas une URL d’image.

Partez de la démo exécutable pour le langage de votre serveur.
Utilisez l'URL d’envoi ou le gestionnaire personnalisé documentés pour la version que vous avez installée. N’enregistrez pas de gestionnaires concurrents.
Suivez la configuration du stockage de fichiers pour désactiver l’intégration en base64 lorsque votre application exige des images envoyées au serveur.
Insérez, collez et déposez une image séparément. Enregistrez, rechargez, et ouvrez l’URL de l’image enregistrée dans le contexte où les lecteurs consulteront le document.

Trouver votre symptôme

Aucune requête d’envoi n’apparaît

Recherchez des erreurs d’initialisation dans la console et vérifiez que le script du gestionnaire a été chargé avant que l’éditeur ne l’utilise. Si le HTML contient une source data:image/, l’image a été intégrée au lieu d’être envoyée. Vérifiez la configuration réelle de l’éditeur, et pas seulement le fichier que vous pensiez déployer.

401 ou 403 : la requête est rejetée

Examinez l’authentification, la validation CSRF et les autorisations sur les dossiers. Une page de connexion renvoyée avec le statut 200 est aussi un envoi échoué. Pour les envois cross-origin, vérifiez la configuration des cookies et du CORS sur les deux origines. Gardez les contrôles d’accès activés ; utilisez le flux d’envoi authentifié de votre application.

413 : le fichier est trop volumineux

Vérifiez le proxy inverse, le serveur web, la limite multipart du framework et la limite de l’application. C’est la plus petite limite qui s’applique. Testez juste en dessous et juste au-dessus de la limite que vous visez. Le redimensionnement côté navigateur peut réduire les photos, mais les limites du serveur doivent quand même protéger le point de terminaison.

Réponse 200, mais pas d’image

Examinez le corps et le type de contenu de la réponse. Elle doit suivre un format de réponse pris en charge, et non un message de succès, une page d’erreur HTML ou un chemin du système de fichiers. Pour un gestionnaire personnalisé, appelez son callback de fin une seule fois, avec l’URL enregistrée ou une erreur.

L’envoi réussit, puis l’URL de l’image renvoie 404

Ouvrez directement l’URL renvoyée. Vérifiez le préfixe d’URL public, le répertoire virtuel, la casse du nom de fichier, la diffusion des fichiers statiques et la persistance du stockage. Une URL relative peut se résoudre sous un autre chemin sur la page publiée. Testez l’URL depuis la page de l’éditeur et depuis la page de lecture.

Les images disparaissent après un redémarrage ou un déploiement

Vérifiez si les fichiers envoyés ont été écrits dans un répertoire temporaire ou dans un répertoire de l’application remplacé lors du déploiement. Utilisez un stockage persistant et incluez-le dans votre politique de sauvegarde. Un déploiement ne doit pas remplacer les fichiers envoyés par les utilisateurs par ceux d’un package de démo.

Vérifier le document enregistré, pas seulement l’aperçu

Un aperçu peut apparaître avant la fin de l’envoi. Lisez le HTML soumis, la valeur stockée et le HTML renvoyé après rechargement. Vérifiez que l’image pointe vers son URL définitive. Une URL blob: non résolue appartient à une session du navigateur ; ce n’est pas un stockage durable.

Si les images fonctionnent dans l’éditeur mais disparaissent après l’enregistrement, vérifiez le moment de la soumission, la validation côté serveur et la politique d’images de votre filtre de nettoyage HTML. Ne désactivez pas le nettoyage pour faire apparaître une image. Consultez l’enregistrement de texte enrichi avec des images.

Vérifications pour la production

Validez sur le serveur le type de fichier, les dimensions décodées et la taille.
Générez les noms de stockage ; ne faites pas confiance aux chemins ni aux noms de fichiers envoyés.
Appliquez des autorisations par utilisateur ou par locataire aux envois et à l’accès à la galerie.
Gardez les images privées derrière une diffusion soumise à autorisation ; une URL publique est publique même si la page de l’éditeur exige une connexion.
Testez le refus, l’annulation et une connexion lente, en plus du succès.

Ce qu’il faut envoyer au support

Indiquez la version de votre éditeur, votre framework, une configuration minimale, l’action qui échoue, le statut HTTP et une réponse expurgée. Précisez si le problème survient avant l’envoi, après l’insertion, ou après l’enregistrement et le rechargement. Retirez les cookies, les jetons, les URL d’images privées et le contenu des clients avant de partager des journaux.

Exemples côté serveur : ASP.NET Core, Web Forms et MVC, PHP. Essayez la démo de glisser-déposer d’images.