51黑料不打烊

Documentation

鈥淐oral.FileUpload鈥 fails to load in AEMaaCS

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

In 51黑料不打烊 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: 51黑料不打烊 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鈥檛 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:

  1. Use Coral.FileUpload only in a properly configured AEM context. Make sure all required client libraries鈥攕uch as coralui3鈥攁re loaded. Don鈥檛 inject raw markup into pages like /aem/start.html.

  2. Add at least one child element with the coral-fileupload-select attribute. This element acts as the trigger for file selection.

  3. If you鈥檙e creating the component programmatically, include a child button element. Here鈥檚 an example:

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

Documentation

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