Documentazione

Impossibile caricare "Coral.FileUpload" 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, il rendering o il funzionamento del componente Coral.FileUpload non riesce se inserito in pagine come /aem/start.html. Per risolvere il problema, utilizza il componente in un contesto valido con gli elementi richiesti.

Descrizione description

Ambiente

  • Prodotto: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets
  • Versione SDK: v2025.7.21706.20250723T205632Z-250700

Problema/Sintomi

  • Il pulsante Seleziona file non riesce a eseguire il rendering con lo stile dell'interfaccia utente Coral.
  • Facendo clic sul pulsante non si attiva la finestra di dialogo per la selezione dei file.
  • Nella console del browser o nell’attività di rete non viene visualizzato alcun errore.
  • L’interfaccia di caricamento file è completamente assente dalla pagina sottoposta a rendering.

Causa

Il problema si verifica quando il markup non elaborato o JavaScript per Coral.FileUpload viene inserito in pagine prive delle librerie client e della logica di inizializzazione richieste, ad esempio /aem/start.html.

Risoluzione resolution

Per garantire il corretto funzionamento del componente Coral.FileUpload, eseguire la procedura seguente:

  1. Utilizza Coral.FileUpload solo in un contesto AEM configurato correttamente. Assicurati che tutte le librerie client richieste, come coralui3, siano caricate. Non inserire markup non elaborato in pagine come /aem/start.html.

  2. Aggiungere almeno un elemento figlio con l'attributo coral-fileupload-select. Questo elemento funge da trigger per la selezione dei file.

  3. Se stai creando il componente a livello di programmazione, includi un elemento pulsante figlio. Di seguito è riportato un esempio:

    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. Dopo aver aggiornato l’implementazione, verifica quanto segue:

    • Il pulsante Seleziona file viene visualizzato con lo stile corretto.
    • Facendo clic sul pulsante si apre la finestra di dialogo di selezione dei file.
    • Tutte le librerie client richieste sono state caricate correttamente.
    • Nessun errore visualizzato nella console del browser.

Lettura correlata

Documentazione di Coral.FileUpload

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