'Exceptions while creating dirs with getDirectoryHandle in specific cases

Update: I raised a bug report in Chromium. Hopefully this situation can be fixed soon.

I'm trying to create a web app that can modify a directory in order to install mods for a game for the user. It uses FileSystemDirectoryHandle. However, for some reason, using .getDirectoryHandle("dirname", { create: true }) throws an exception of

DOMException: An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk.

if I drag the directory into it. If I pick the directory using window.showDirectoryPicker(), it doesn't happen.

It also only happens for directories in .local and subfolders. As for anything about that directory in particular, it has drwx------ from ls -la. Using the utility lsd fails in anything inside of the .local directory, but /usr/bin/ls works fine, and Nautilus works fine in there too. If it matters, I'm on Ubuntu and using Chromium.

Here's a demo page (needs to be hosted on localhost):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing DragN'Drop</title>
    <style>
      body {
        background: #0a2d2e;
        color: #fff;
        font-family: system-ui, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>Drag anywhere!</p>
    <button>Browse.</button>
    <script>
      addEventListener("dragover", (e) => e.preventDefault(), false);
      addEventListener("drop", (e) => {
        e.preventDefault();
        e.dataTransfer.items[0].getAsFileSystemHandle().then(handleHandle);
      });
      document.querySelector("button").onclick = async () => {
        const handle = await window.showDirectoryPicker();
        handleHandle(handle);
      };
      const handleHandle = (handle) => {
        console.log(handle);
        handle
          .getDirectoryHandle("never", { create: true })
          .then(console.log)
          .catch(console.error);
      };
    </script>
  </body>
</html>

(I understand that this question could fit more on other Stack Exchange sites, but I'm asking here first because I don't know of any yet are that good of a fit.)

javascript permissions

Solution 1:^[1]

2 issues.

You need to enable https for getAsFileSystemHandle to work. Follow these instructions for it to work with vscode. Assuming you use vscode;

Create a .crt and .key with openssl >
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout selfsigned.key -out selfsigned.crt
Create a settings.json in /.vscode folder

{
    "liveServer.settings.https": {
        "enable": true, //set it true to enable the feature.
        "cert": "X:\\code\\selfsigned.crt", //full path of the certificate
        "key": "X:\\code\\selfsigned.key", //full path of the private key
        "passphrase": "1234"
    }
}

Function handleHandle need to be declated before.

// move this one to the top
const handleHandle = (handle) => {
    console.log(handle);
    handle
        .getDirectoryHandle("never", { create: true })
        .then(console.log)
        .catch(console.error);
};
addEventListener("dragover", (e) => e.preventDefault(), false);
addEventListener("drop", (e) => {
    e.preventDefault();
    e.dataTransfer.items[0].getAsFileSystemHandle().then(handleHandle);
});
document.querySelector("button").onclick = async () => {
    const handle = await window.showDirectoryPicker();
    handleHandle(handle);
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jakob_a

'Exceptions while creating dirs with getDirectoryHandle in specific cases

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]