Search code examples
javascriptnative-file-system-api-js

File System API states it can't open the documents folder because it contains system files, which it doesn't

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>
Solution

  • 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.