javascriptfiledirectoryfile-system-access-api

Can I set a specific drive (e.g,"D:\") as a default directory for showOpenFilePicker?


We have a Java (JSP) web application and I want (well, the client) wants when they upload a file , based on a specific condition , the file picker to open directly in the D drive root directory. Also when they download a file, the file to be downloaded automatically by default in the same D (USB) drive (not universally through browser settings of course).

I know that this is not possible due to security reasons but I recently saw about this File System Access API and I am trying to understand what is possible.

Well, apparently we can use

async function fileOpen() {
            const fileHandle = await window.showOpenFilePicker({
                startIn: 'documents'
            });
        }

but in the startIn property whenever I try setting D:\ or anything other than the WellKnownDirectories I get the error:

TypeError: Failed to execute 'showOpenFilePicker' on 'Window': Failed to read the 'startIn' property from 'FilePickerOptions': The provided value 'D:\' is not a valid enum value of type WellKnownDirectory.

So is something like that possible? The file picker that opens from the <input type=file> doesn't support setting any value for the default directory so this is why I am looking at the file system access api.

Keep in mind that this is a controlled environment and the existence of the D: drive is ensured


Solution

  • The best thing you can do with showOpenFilePicker/showSaveFilePicker (i.e. without requesting acess to directories) is keeping the same directory between pickers:

    1. You can't request initial path in showOpenFilePicker, so the first time you open file picker user have to navigate do D:/ themselves.
      (you may provide WellKnownDirectory("documents"/...) startIn) to chose where user starts from
    2. The second time you open file picker, you may request browser open file picker in the same location by provoding it the same id
    await showOpenFilePicker({ id:"thisGonnaBeDDrive" })
    // this opens default directory (socuments or whatever)
    // user opens `D:/foo/myfile.bar`
    await showOpenFilePicker({ id:"thisGonnaBeDDrive" })
    // this opens *the same* directory used last time - `D:/foo/`
    await showSaveFilePicker({ id:"thisGonnaBeDDrive" })
    // this opens *the same* directory used last time - `D:/foo/`
    
    1. Alternatively, you can use the FileSystemHandle you got to open file picker in the same location
    let [handle] = await showOpenFilePicker()
    // user opens `D:/foo/myfile.bar`
    showOpenFilePicker({ startIn: handle })
    // this opens directory of *the handle* - `D:/foo/`
    

    startIn handle has a priority over id
    id has a priority over WellKnownDirectory("documents"/...) startIn