Échec du chargement de « Coral.FileUpload » dans AEMaaCS
Dans Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets, le composant Coral.FileUpload ne parvient pas à effectuer le rendu ou à fonctionner lorsqu’il est injecté dans des pages comme /aem/start.html. Pour résoudre ce problème, utilisez le composant dans un contexte valide avec les éléments requis.
Description description
Environnement
- Produit : Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets
- Version de SDK : v2025.7.21706.20250723T205632Z-250700
Problème/Symptômes
- Le rendu du bouton Sélectionner des fichiers échoue avec le style de l’IU Coral.
- Cliquer sur le bouton ne déclenche pas la boîte de dialogue de sélection du fichier.
- Aucune erreur n’apparaît dans la console du navigateur ou l’activité réseau.
- L’interface de chargement de fichier est complètement absente de la page rendue.
Cause
Le problème se produit lorsque des balises brutes ou JavaScript for Coral.FileUpload sont injectées dans des pages qui ne disposent pas des bibliothèques clientes et de la logique d’initialisation requises, telles que /aem/start.html.
Résolution resolution
Pour vous assurer que le composant Coral.FileUpload fonctionne correctement, procédez comme suit :
-
Utilisez
Coral.FileUploaduniquement dans un contexte AEM correctement configuré. Assurez-vous que toutes les bibliothèques clientes requises, telles que coralui3, sont chargées. N’injectez pas de balises brutes dans des pages comme/aem/start.html. -
Ajoutez au moins un élément enfant avec l’attribut
coral-fileupload-select. Cet élément agit comme le déclencheur pour la sélection de fichier. -
Si vous créez le composant par programmation, incluez un élément de bouton enfant . Voici un exemple :
code language-none dialogContent.appendChild((function () { var upload = new Coral.FileUpload().set({ accept: "image/*", sizeLimit: 1000, name: "file", action: "path/to/upload" }); var selectBtn = new Coral.Button().set({ label: { innerHTML: "Select files…" } }); // Mark this button as the "select" trigger selectBtn.setAttribute("coral-fileupload-select", ""); // Append the button into the FileUpload component upload.appendChild(selectBtn); return upload; })()); -
Après avoir mis à jour votre implémentation , vérifiez les points suivants :
- Le bouton Sélectionner un fichier s’affiche avec un style correct.
- Cliquez sur le bouton pour ouvrir la boîte de dialogue de sélection de fichier.
- Toutes les bibliothèques clientes requises se chargent correctement.
- Aucune erreur ne s’affiche dans la console du navigateur.