Why is File.WriteAllText Working in a Blazor Server app, and then why not in a WASM WPA app?

Question

I have a Blazor Server app that I am converting to WASM WPA. The app uses System.IO.File.WriteAllText to create local files. That's working in the Server app running in Chrome (i.e. files are created in directories I select). But it's not working in the WASM WPA app and no exception is being thrown.

My impression has been that accessing the local file system from a browser is not allowed due to security concerns. But I am seeing things that suggest it is now allowed, at least in some browsers.

So what is the current situation? Is it allowed, as my Server app demonstrates it is? If so, do all/most browsers support it? And why may it not be working in my WASM WPA version?

Answer 1

with Blazor server app, file I/O is handled by the hosting operating system, and has full access to the servers filesystem.

with Blazor WASM, file I/O is handled by jsinterop to browser javascript.

• the browser supports reading a file selected with the <input type="file"> control or window.showOpenFilePicker()
• the browser supports writing a file via a data url on an anchor or the window.showSaveFilePicker() which give a handle.

the file api is async (returns promise which is not supported by jsinterop serialization), so can not be called directly from Blazor. you should write a javascript function that calls back to a Blazor static method when complete:

// blazor must call with InvokeVoidAsync as a promise is returned.
const readFile = async (assemblyName, methodName) =>  {
  try {
    // Always returns an array.
    const [handle] = await window.showOpenFilePicker();
    const file = await handle.getFile();
    const text = await file.text();
    await DotNet.invokeMethodAsync(assemblyName, methodName, text);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

// blazor must call with InvokeVoidAsync as a promise is returned.
const saveFile = async (assemblyName, methodName, text) => {
  try {
    const handle = await window.showSaveFilePicker({
      types: [{
        accept: {
          // Omitted
        },
      }],
    });
    const writable = await handle.createWritable();
    await writable.write(text);
    await writable.close();
    await DotNet.invokeMethodAsync(assemblyName, methodName);
  } catch (err) {
    console.error(err.name, err.message);
  }
};