(() => {
  function bindPicker(picker) {
    const input = picker.querySelector('[data-file-picker-input]');
    const output = picker.querySelector('[data-file-picker-name]');
    const button = picker.querySelector('[data-file-picker-button]');
    if (!input || !output || input.dataset.filePickerBound === '1') return;
    input.dataset.filePickerBound = '1';
    const emptyText = output.dataset.emptyText || '';
    const refresh = () => {
      const files = Array.from(input.files || []);
      output.textContent = files.length ? files.map(file => file.name).join(', ') : emptyText;
      output.title = output.textContent;
    };
    button?.addEventListener('click', () => input.click());
    input.addEventListener('change', refresh);
    refresh();
  }

  function bindAll(root = document) {
    root.querySelectorAll('[data-file-picker]').forEach(bindPicker);
  }

  bindAll();
})();