0

I am struggling to understand if this is a bug or a feature of the new File System API. When using showDirectoryPicker and selecting the standard Windows documents directory, or the downloads directory, a pop-up appears stating that it can't open the folder because it contains system files, which it does not. Has anyone found a way around this, or am I missing something obvious?

enter image description here

Here is a fully functional example:

<!DOCTYPE HTML>
<html>
<head>
  <title>File System API</title>
</head>
<button onclick="checkDirExists();">Initialize</button>
<body>

</body>
<script>

async function checkDirExists(){
    const homeDirHdl = await window.showDirectoryPicker({
        startIn: 'documents',
    });
    if (homeDirHdl){
        const draftsDirHdl = await homeDirHdl.getDirectoryHandle('drafts', {create: true});
    }
}
</script>
</html>
Taz Evans
  • 37
  • 1
  • 7

2 Answers2

2

By design the File System Access API excludes certain folders from being opened or limits access to them. They are listed as the so-called well-known directories in the spec. Concretely, they are:

  • desktop: The user’s Desktop directory, if such a thing exists. For example this could be C:\Documents and Settings\username\Desktop, /Users/username/Desktop, or /home/username/Desktop.
  • documents: Directory in which documents created by the user would typically be stored. For example C:\Documents and Settings\username\My Documents, /Users/username/Documents, or /home/username/Documents.
  • downloads: Directory where downloaded files would typically be stored. For example C:\Documents and Settings\username\Downloads, /Users/username/Downloads, or /home/username/Downloads.
  • music: Directory where audio files would typically be stored. For example C:\Documents and Settings\username\My Documents\My Music, /Users/username/Music, or /home/username/Music.
  • pictures: Directory where photos and other still images would typically be stored. For example C:\Documents and Settings\username\My Documents\My Pictures, /Users/username/Pictures, or /home/username/Pictures.
  • videos: Directory where videos/movies would typically be stored. For example C:\Documents and Settings\username\My Documents\My Videos, /Users/username/Movies, or /home/username/Videos.

Typically, browsers also block access to system directories like C:\Windows.

The reason these folders are blocked are (i), preventing access to system-critical files (a web application should not be able to wipe your Windows folder) and (ii) preventing files to be abused as identifiers (e.g., two independent apps which had access to the user's downloads folder could create and then check for the existence of an identifying file). See the relevant section of the spec for more details and background.

DenverCoder9
  • 2,024
  • 11
  • 32
0

As https://stackoverflow.com/a/72027437/14188773 said, you can't do that with the FSA API functions, but you can do it using the drop/paste events. For example you can copy/paste your drive folders:

  window.addEventListener('paste', handleInput)

  let driveHandles = {}
  async function handleInput ({ dataTransfer }) {
    const drives = [...dataTransfer.files].map(file => file.name.endsWith('_drive') && file.name[0])
    const handles = await Promise.all([...dataTransfer.items].map(item => item.getAsFileSystemHandle()))
    currentHandle = handles[0]
    for (let i = 0; i < drives.length; ++i) {
      const drive = drives[i]
      if (drive) {
        driveHandles[drive] = handles[i]
      }
    }
  }

which creates a map of drive handles, which are root folders you can't normally access using the FSA API, then you can save them via IDB and persist them across sessions. this lets u access stuff like system volume information etc

ThaUnknown
  • 1