The first function saveAs() get the FileSystemDirectoryHandle, creates a new subdirectory named "NewDirectoryName" and a file in it named "NewFileName.doc", then saves the content of the div in this file.
The second function saveAs2() get all the FileSystemFileHandle and FileSystemDirectoryHandle of subdirectories and files in the choosen directory. Here, I write again on the same file named "NewFileName.doc", and log all others Handle of the directory in the console.
<html>
<body>
<input type="button" onmousedown="saveAs()" value="Create file in directory"/>
<input type="button" onmousedown="saveAs2()" value="Overwrite any file in directory"/>
<div contenteditable id="div001"><b>Text to save in your new file</b><div>
<script>
async function saveAs(){
div001 = document.querySelector('#div001');
const opts = {mode:'readwrite'};
directoryHandle = await window.showDirectoryPicker(opts);
const subDirectory = await directoryHandle.getDirectoryHandle('NewDirectoryName', {create:true});
const file = subDirectory.getFileHandle('NewFileName.doc', {create:true});
const writable = await file.createWritable();
await writable.write(div001.innerHTML);
await writable.close();
};
async function saveAs2(){
for await([name,handle] of directoryHandle){if(name=="NewDirectoryName"){const file = await handle.getFileHandle("NewFileName.doc", {create:true});
const writable = await handle.createWritable();
await writable.write(dv001.innerHTML);
await writable.close();
console.log(handle);
}else{console.log(handle);}}
};
</script>
</body>
</html>
