FileEntry.file() method not working properly when opening an HTML file directly

I am working on a drag-and-drop upload feature. Through the drop event, I use e.dataTransfer.items to retrieve the handles for all files and folders, then call the items[n].webkitGetAsEntry() method to get the FileEntry object. Finally, I attempt to use the FileEntry.file((file) => {}) method to retrieve the file object from the callback:

function traverseFileTree(item, path = "") {
  // The item here is the return value of webkitGetAsEntry().
  const isRecursive = document.getElementById("recursiveOption").checked;
  if (item.isFile) {
    item.file(
      (file) => {
        console.log("file", file);
        if (file.name.toLowerCase().endsWith(".md")) {
          file.fullPath = path + file.name;
          files.push(file);
          updateFileList();
        }
      },
      (error) => {
        console.error(error);
        showPopup(`Failed to read file ${item.name}: ${error.message}`);
      }
    );
  } else if (item.isDirectory) {
    if (isRecursive || path === "") {
      let dirReader = item.createReader();
      dirReader.readEntries(
        (entries) => {
          for (let i = 0; i < entries.length; i++) {
            traverseFileTree(entries[i], path + item.name + "/");
          }
        },
        (error) => {
          console.error("Failed to read directory:", error);
          showPopup(`Failed to read directory ${item.name}: ${error.message}`);
        }
      );
    }
  }
}

However, something strange happens: when I open the HTML file directly in the browser (using the file protocol), the .file() method throws an EncodingError:
file:

EncodingError: A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs.

But, when I serve the same HTML file through a local server (e.g., using Live Server over HTTP), the .file() method works as expected and I can successfully retrieve the file object.
http:

I’ve searched various resources and consulted GPT but couldn’t find a definitive answer. I suspect the issue may be related to browser security policies or relative path restrictions. Has anyone encountered this problem or knows what might be causing it?

I wish:
Understand the specific cause of this issue.
How should I solve similar problems on my own in the future?

Thank you!