custom-element-fileuploader

fileuploader.js

class FileUploader extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        const input = document.createElement('input');
        input.type = 'file';
        this.shadowRoot.appendChild(input);

        // inputのchangeイベントリスナーを設定
        input.addEventListener('change', (event) => {
            // 選択されたファイルを取得
            const file = event.target.files[0];
            this.selectedFile = file;

            // カスタムイベントを作成して発火
            const customEvent = new CustomEvent('file-changed', {
                detail: { file }, // イベントに関連付けられたデータ
                bubbles: true, // イベントがバブリングするかどうか
                composed: true // イベントがShadow DOMの境界を越えるかどうか
            });
            this.dispatchEvent(customEvent);
        });
    }
}

customElements.define('file-uploader', FileUploader);

pagecode.js

$w.onReady(function () {
    $w("#customElement1").on('file-changed', (event) => {
        console.log('file: ', event.detail.file)
    });
});