“Coral.FileUpload” fails to load in AEMaaCS

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

In Adobe Experience Manager as a Cloud Service (AEMaaCS) – Assets, the Coral.FileUpload component fails to render or function when injected into pages like /aem/start.html. To resolve the issue, use the component in a valid context with required elements.

Description description

Environment

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

Issue/Symptoms

The Select files button fails to render with Coral UI styling.
Clicking the button doesn’t trigger the file selection dialog.
No errors appear in the browser console or network activity.
The file upload interface is completely absent from the rendered page.

Cause

The issue occurs when raw markup or JavaScript for Coral.FileUpload is injected into pages that lack required client libraries and initialization logic, such as /aem/start.html.

Resolution resolution

To ensure the Coral.FileUpload component works correctly, follow these steps:

Use Coral.FileUpload only in a properly configured AEM context. Make sure all required client libraries—such as coralui3—are loaded. Don’t inject raw markup into pages like /aem/start.html.
Add at least one child element with the coral-fileupload-select attribute. This element acts as the trigger for file selection.

If you’re creating the component programmatically, include a child button element. Here’s an example:

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

After updating your implementation, verify the following:
- The Select file button appears with correct styling.
- Clicking the button opens the file selection dialog.
- All required client libraries load successfully.
- No errors appear in the browser console.

Coral.FileUpload Documentation

recommendation-more-help