FileSystemAccessAPI opens system file picker, but doesn't write to file

Question

I have an HTML form (running locally) that I want to dump its output to a user-specified location on their local drive. I format the fields as a string (contents), and then I pass it to this JS code:

writeFile.js

    // Create a handle; allow user to pick their file.
    const fileHandle = await window.showSaveFilePicker();

    // Create a FileSystemWritableFileStream to write to.
    const writableStream = await fileHandle.createWritable();

    // Write the prepared contents of the file to the stream.
    await writableStream.write(contents);

    // Close the file and write the contents to disk.
    await writableStream.close();

I then implement this in the HTML code as a button, which I believe works as it should:

form.html

    <input id="download_path" type="submit" class="btn" style="width: 125px" onclick="writeFile();" />

This is a direct implementation of this "Concepts and Usage" section of the MDN Web Docs

The Windows save dialog opens, allows user to save the file, but the file is blank. I have also tried replacing contents with a literal string, which doesn't show up in the file. I'm not sure what other methods to debug there are, as I very rarely develop webapps (although I know they exist).

My thoughts are that since this API is limited to secure contexts only (https://), it cannot run on a local html file (file:///). But shouldn't there be a way for a local HTML file to bypass this, since it is in a closed system?

Browser: Chrome 88.0.4324.182

Windows Version: Windows 10 Pro

Answer 1

This File System Access API is required over secure context. What I do when I need to run something that requires secure context, I use repl.it because they have an inbuilt code editor that updates on the website instantly. You could also use localhost with secure context, which you can learn about here. Also try changing:

<input id="download_path" type="submit" class="btn" style="width: 125px" onclick="writeFile();" />

to:

<input id="download_path" type="button" class="btn" style="width: 125px" onclick="writeFile();" value="Hello" />

or to:

<button id="download_path" class="btn" style="width: 125px" onclick="writeFile();">Hello</button>

Answer 2

I think I found the issue -- I had my button inside the <form> element, which was preventing it from fully executing. It would open the save dialog, but the file would be empty. Strangely, moving the button outside this makes it work perfectly now.