"Coral.FileUpload" kan niet worden geladen in AEMaaCS

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

In Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets, kan de component Coral.FileUpload niet worden gerenderd of werkt deze niet wanneer deze in pagina's wordt geïnjecteerd, zoals /aem/start.html . Gebruik de component in een geldige context met de vereiste elementen om het probleem op te lossen.

Beschrijving description

Omgeving

Product: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets
Versie van SDK: v2025.7.21706.20250723T205632Z-250700

Probleem/symptomen

De Uitgezochte dossiers knoop ontbreekt om met het stileren van de Koraal UI terug te geven.
Als u op de knop klikt, wordt het dialoogvenster voor het selecteren van bestanden niet geactiveerd.
Er worden geen fouten weergegeven in de browserconsole of netwerkactiviteit.
De interface voor het uploaden van bestanden ontbreekt volledig op de weergegeven pagina.

Oorzaak

Het probleem doet zich voor wanneer onbewerkte opmaakcodes of JavaScript for Coral.FileUpload worden geïnjecteerd in pagina's waarvoor geen clientbibliotheken en initialisatielogica vereist zijn, zoals /aem/start.html .

Resolutie resolution

Ga als volgt te werk om ervoor te zorgen dat de component Coral.FileUpload correct werkt:

Gebruik Coral.FileUpload alleen in een correct geconfigureerde AEM-context. Zorg ervoor dat alle vereiste clientbibliotheken, zoals coralui3, zijn geladen. Injecteer geen ruwe opmaak op pagina's zoals /aem/start.html .
Voeg ten minste één onderliggend element toe met het kenmerk coral-fileupload-select . Dit element fungeert als trigger voor de bestandsselectie.

Als u de component via programmacode maakt, neemt u een element voor een onderliggende knop op. Hier volgt een voorbeeld:

code language-none

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

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

Nadat u de implementatie hebt bijgewerkt, controleert u het volgende:
- De Uitgezochte dossier knoop verschijnt met correct het stileren.
- Als u op de knop klikt, wordt het dialoogvenster voor het selecteren van bestanden geopend.
- Alle vereiste clientbibliotheken zijn geladen.
- Er worden geen fouten weergegeven in de browserconsole.

Gerelateerde lezing

Coral.FileUpload Documentatie

recommendation-more-help

3d58f420-19b5-47a0-a122-5c9dab55ec7f