„Coral.FileUpload“ kann in AEMaaCS nicht geladen werden

Last update: Thu Sep 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

In Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets kann die Coral.FileUpload-Komponente nicht gerendert werden oder funktionieren, wenn sie in Seiten wie /aem/start.html eingefügt wird. Um das Problem zu beheben, verwenden Sie die -Komponente in einem gültigen Kontext mit erforderlichen Elementen.

Beschreibung description

Umgebung

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

Problem/Symptome

Die Schaltfläche Dateien auswählen kann nicht mit Coral-UI-Stilen gerendert werden.
Durch Klicken auf die Schaltfläche wird das Dialogfeld zur Dateiauswahl nicht Trigger.
In der Browser-Konsole oder der Netzwerkaktivität werden keine Fehler angezeigt.
Die Datei-Upload-Oberfläche fehlt auf der gerenderten Seite vollständig.

Ursache

Das Problem tritt auf, wenn unformatiertes Markup oder JavaScript für Coral.FileUpload in Seiten eingefügt wird, denen die erforderlichen Client-Bibliotheken und Initialisierungslogik fehlen, z. B. /aem/start.html.

Auflösung resolution

Gehen Sie wie folgt vor, um sicherzustellen, dass die Coral.FileUpload-Komponente ordnungsgemäß funktioniert:

Verwenden Sie Coral.FileUpload nur in einem ordnungsgemäß konfigurierten AEM-Kontext. Stellen Sie sicher, dass alle erforderlichen Client-Bibliotheken, wie z. B. coralui3, geladen werden. Injizieren Sie kein unformatiertes Markup in Seiten wie /aem/start.html.
Fügen Sie mindestens ein untergeordnetes Element mit dem coral-fileupload-select hinzu. Dieses Element dient als Trigger für die Dateiauswahl.

Wenn Sie die Komponente programmgesteuert erstellen, fügen Sie ein untergeordnetes Schaltflächen-Element hinzu. Im Folgenden finden Sie ein Beispiel:

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