설명서

"Coral.FileUpload"가 AEMaaCS에서 로드되지 않음

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

Adobe Experience Manager as a Cloud Service(AEMaaCS) - Assets에서 Coral.FileUpload과(와) 같은 페이지에 삽입할 때 /aem/start.html 구성 요소가 렌더링되거나 작동하지 않습니다. 이 문제를 해결하려면 필수 요소가 포함된 유효한 컨텍스트에서 구성 요소를 사용하십시오.

설명 description

환경

  • 제품: Adobe Experience Manager as a Cloud Service(AEMaaCS) - Assets
  • SDK 버전: v2025.7.21706.20250723T205632Z-250700

문제/증상

  • 파일 선택 단추가 Coral UI 스타일링으로 렌더링되지 않습니다.
  • 버튼을 클릭해도 파일 선택 대화 상자가 트리거되지 않습니다.
  • 브라우저 콘솔 또는 네트워크 활동에서 오류가 나타나지 않습니다.
  • 렌더링된 페이지에 파일 업로드 인터페이스가 완전히 없습니다.

원인

Coral.FileUpload에 대한 원시 마크업이나 JavaScript이 필요한 클라이언트 라이브러리 및 초기화 논리(예: /aem/start.html)가 없는 페이지에 삽입되면 문제가 발생합니다.

해결 방법 resolution

Coral.FileUpload 구성 요소가 올바르게 작동하는지 확인하려면 다음 단계를 수행하십시오.

  1. 올바르게 구성된 AEM 컨텍스트에서만 Coral.FileUpload을(를) 사용합니다. coralui3와 같은 필요한 모든 클라이언트 라이브러리가 로드되었는지 확인합니다. /aem/start.html과(와) 같은 페이지에 원시 마크업을 삽입하지 마십시오.

  2. coral-fileupload-select 특성이 있는 자식 요소를 하나 이상 추가합니다. 이 요소는 파일 선택을 위한 트리거로 작동합니다.

  3. 프로그래밍 방식으로 구성 요소를 만드는 경우 하위 단추 요소를 포함합니다. 다음은
    의 예입니다.

    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. 구현을 업데이트한 후 다음을 확인하십시오.

    • 파일 선택 단추가 올바른 스타일로 나타납니다.
    • 버튼을 클릭하면 파일 선택 대화 상자가 열립니다.
    • 모든 필수 클라이언트 라이브러리가 성공적으로 로드되었습니다.
    • 브라우저 콘솔에 오류가 표시되지 않습니다.

관련 읽기

Coral.FileUpload 설명서

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