Is it possible to use JavaScript to write to a file on the user's system?

General Discussions
, ,
1

I want to JavaScript write to file—specifically, write data to an existing abc.txt file—not just print it to the console. I’ve seen various solutions, but most either print the output or throw errors.

For example, I tried the following code:

var f = "sometextfile.txt";

writeTextFile(f, "Spoon");
writeTextFile(f, "Cheese monkey");
writeTextFile(f, "Onion");

function writeTextFile(afilename, output) {
  var txtFile = new File(afilename);
  txtFile.writeln(output);
  txtFile.close();
}

But it gives errors like:

  • Uncaught TypeError: Illegal constructor (Chrome)
  • SecurityError: The operation is insecure. (Firefox)

Is there actually a way to write data to a file purely with JavaScript in the browser, or is it only possible using server-side code or browser APIs with special permissions?

2

I’ve been working with frontend web apps for a few years, and one of the first things I learned is that direct file access is a bit tricky in browsers due to security restrictions. But for most use cases, you can fake it with libraries like FileSaver.js

Here’s how you can use it for a javascript write to file kind of situation:

const blob = new Blob(["Spoon\nCheese monkey\nOnion"], { type: 'text/plain' });
saveAs(blob, "abc.txt"); // from FileSaver.js

Why it’s handy:

  • You get to simulate file writing by triggering a download.
  • No deep file system access needed.
  • It works well across Chrome, Firefox, and Edge.

It doesn’t let you truly write to a file on the system, but it’s good enough when you just need to generate and download some content.

3

Yeah, I’ve used FileSaver.js before too. But if you want to go even simpler and avoid external dependencies, there’s another neat trick I’ve relied on over the years using the <a> tag’s download attribute.

Here’s how I’ve done javascript write to file without any libraries:

function downloadFile() {
  const text = "Spoon\nCheese monkey\nOnion";
  const blob = new Blob([text], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'abc.txt';
  link.click();
}

What’s cool about this:

  • It’s plain vanilla JavaScript.
  • Doesn’t need any external scripts.
  • Still lets you offer a downloadable file to the user.

Just like FileSaver, it’s not direct disk write access—but still very effective for most client-side javascript write to file tasks.

4

I’ve been exploring newer browser APIs lately, and if you’re after something closer to actual file system interaction, the File System Access API might be what you’re looking for.

This approach is more “real” when it comes to javascript write to file use cases—though it’s still experimental and Chromium-only for now.

async function writeToFile() {
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: 'abc.txt',
    types: [{
      description: 'Text files',
      accept: { 'text/plain': ['.txt'] },
    }],
  });

  const writable = await fileHandle.createWritable();
  await writable.write("Spoon\nCheese monkey\nOnion");
  await writable.close();
}

Why I like this method:

  • The user actually chooses where to save the file.
  • You get real write access—no download tricks.
  • As this API matures, it could change how we handle javascript write to file in the browser.

Of course, the user still needs to grant permission—but that’s part of keeping things secure on the web.