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.)
2 issues.
getAsFileSystemHandle to work.
Follow these instructions for it to work with vscode.
Assuming you use vscode;openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout selfsigned.key -out selfsigned.crt{
"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"
}
}
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);
};