AEMaaCS で「Coral.FileUpload」を読み込めない
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 コンポーネントが正しく動作することを確認するには、次の手順に従います。
-
Coral.FileUploadは、適切に設定されたAEM コンテキストでのみ使用します。 coralui3 など、必要なすべてのクライアントライブラリが読み込まれていることを確認します。/aem/start.htmlのようなページには生のマークアップを挿入しないでください。 -
coral-fileupload-select属性を持つ子要素を 1 つ以上追加します。 この要素は、ファイルを選択するためのトリガーとして機能します。 -
コンポーネントをプログラムで作成する場合は、ボタンの子要素を含めます。 次に例を示します。
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; })()); -
実装を更新した後、次の点を確認します。
- ファイルを選択 ボタンが正しいスタイル設定で表示されます。
- ボタンをクリックすると、ファイル選択ダイアログが開きます。
- 必要なすべてのクライアントライブラリが正常に読み込まれます。
- ブラウザーコンソールにエラーは表示されません。
3d58f420-19b5-47a0-a122-5c9dab55ec7f