Documentação

Falha ao carregar "Coral.FileUpload" no AEMaaCS

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

No Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets, o componente Coral.FileUpload não é renderizado nem funciona quando inserido em páginas como /aem/start.html. Para resolver o problema, use o componente em um contexto válido com os elementos necessários.

Descrição description

Ambiente

  • Produto: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Assets
  • Versão do SDK: v2025.7.21706.20250723T205632Z-250700

Problema/Sintomas

  • O botão Selecionar arquivos não é renderizado com o estilo da interface do Coral.
  • Clicar no botão não aciona a caixa de diálogo de seleção de arquivo.
  • Nenhum erro é exibido no console do navegador ou na atividade de rede.
  • A interface de upload de arquivo está completamente ausente da página renderizada.

Causa

O problema ocorre quando a marcação bruta ou JavaScript para Coral.FileUpload é inserida em páginas que não têm as bibliotecas de clientes e a lógica de inicialização necessárias, como /aem/start.html.

Resolução resolution

Para garantir que o componente Coral.FileUpload funcione corretamente, siga estas etapas:

  1. Use Coral.FileUpload somente em um contexto AEM configurado corretamente. Verifique se todas as bibliotecas de clientes necessárias, como coralui3, estão carregadas. Não insira marcação bruta em páginas como /aem/start.html.

  2. Adicione pelo menos um elemento filho com o atributo coral-fileupload-select. Esse elemento atua como acionador da seleção de arquivos.

  3. Se estiver criando o componente de forma programática, inclua um elemento de botão secundário. Veja um exemplo:

    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. Depois de atualizar sua implementação, verifique o seguinte:

    • O botão Selecionar arquivo é exibido com o estilo correto.
    • Clicar no botão abre a caixa de diálogo de seleção de arquivo.
    • Todas as bibliotecas de clientes necessárias foram carregadas com êxito.
    • Nenhum erro é exibido no console do navegador.

Leitura relacionada

Documentação de Coral.FileUpload

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