É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 :

  1. Utilisez Coral.FileUpload uniquement 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.

  2. 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.

  3. 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;
    })());
    
  4. 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.

Lecture connexe

Documentation Coral.FileUpload

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f