FileSystemAPI not working for directory containing large no of files?

Question

I am using below code which uses FileSystemAPI with webworker

const worker = new Worker( "worker.js" );
btn.onclick = async (evt) => {
  const dirHandle = await showDirectoryPicker();
  worker.postMessage( dirHandle );
};
worker.onmessage = (evt) => {
  console.log( evt.data );
  document.querySelector("pre").textContent = JSON.stringify( evt.data, (key, value) => {
    if( value instanceof Blob ) {
      return { name: value.name, size: value.size, type: value.type };
    }
    return value;
  }, 4 );
}

worker.js

onmessage = async (evt) => {
  const out = {};
  const dirHandle = evt.data;  
  await handleDirectoryEntry( dirHandle, out );
  postMessage( out );
};
async function handleDirectoryEntry( dirHandle, out ) {
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      out[ file.name ] = file;
    }
    if (entry.kind === "directory") {
      const newHandle = await dirHandle.getDirectoryHandle( entry.name, { create: false } );
      const newOut = out[ entry.name ] = {};
      await handleDirectoryEntry( newHandle, newOut );
    }
  }
}

https://glitch.com/edit/#!/navigate-sub-directory-from-a-worker?path=worker.js%3A5%3A21

Above working working for small dataset but with directory with more than 1000+ files it's not working.

Any help or input appreciated. Thanks!

Answer 1

Your code is correct and I just successfully had it traverse 1K+ files on my machine (MacBook Pro 2020). If you run into this problem again, please file a new.crbug.com (using this link pre-populates the bug with all the info the engineering team will need). Feel free to post the bug ID here and I'm happy to triage.