Why does ShowDirectoryPicker hang?

Question

I try to add folder scanning into my web page. Folder selection works fine and I get prompted if I want to allow the access to selected folder. But then nothing happens. In console I see "1" as the last log entry, so await never returns.

Any ideas what I should do?

jQuery(document).ready(function ($) {
  const butDir = document.getElementById('butDirectory');
  butDir.addEventListener('click', async() => {
    console.log("1");
    const dirHandle = await window.showDirectoryPicker();
    console.log("2");
    const promises = [];
    for await (const entry of dirHandle.values()) {
      if (entry.kind !== 'file') {
        continue;
      }
      promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
    }
    console.log(await Promise.all(promises));
  });
});

Answer 1

OK, got it working. Instead of having the code inside jquery.ready() I had to move it outside:

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();
}

and call it directly from HTML

<input type="button" ... onclick="javascript:getDir();"/>

Answer 2

The documentation tells us that transient user activation is needed.

. It also needs to be opened in its own tab, see Window.showDirectoryPicker() not working in Google Chrome 107

So, you will need to comply to the terms the documentation asks you to comply to and if the problem is still unresolved, then you will need to edit your question, provide more information and ping me here in the comment section.