Kilian Valkhof

Creating files in JavaScript in your browser

Did you know you can create files using JavaScript right inside your browser and have users download them? You can create files with a proper name and mime type and it only takes a few lines of code.

Creating downloadable files with JavaScript in your browser only takes a few lines of code. Check out the image and read more in my latest article: https://t.co/ZEarSpftMN pic.twitter.com/6D5GKLxgGp

— Kilian Valkhof (@kilianvalkhof) May 19, 2020

For the new Create workspace feature in Polypane, which lets you create a Polypane workspace with panes from the most used browser sizes from your Google Analytics data, I needed an easy way to create a “.ppws” file that Polypane knows how to read an import.

I already knew it was possible, I just didn’t know how little work it turned out to be.

Here’s how it works: first you get your data ready. Your data can be either binary or text. In my case it was json structure, but you can also get image data from the canvas, for example.

Then when you have this data, you store it in a Blob, the “file-like object” that JavaScript supports. Blobs have been supported since IE10, so you can use them without any transpilation.

const workspace = { ... } // some object

const file = new Blob(
  [JSON.stringify(workspace)], 
  { type: 'application/json' }
);

A blob takes your data in the form of an array or array-like object (like an arraybuffer or another blob). In my case, it only has the text string of my json structure so that was pretty simple. The second argument are options and it’s where you set the type. There’s type, which you use to specify the mime type of your file.

After you’ve done this, the Blob exists but it’s not yet ready for downloading. For that we need to create an Object URL:

const fileURL = URL.createObjectURL(file);

This creates an actual link that we can use to link to our created blob, it starts with blob:. Now we have a file URL that refers to our blob, but you’ll notice it doesn’t actually have a name yet. For that we actually need a little bit of DOM/HTML.

The a element has an attribute called “download”. If it’s present without value, it means that the URL should download when a user clicks on it. But we can also give it a value, and that value will be used as a suggestion for the file name.

Because we created our file in JavaScript, we’ll also create the link in JavaScript, then add it to the page:

// create the link 
const linkElement = document.createElement("a");

// add the file url
linkElement.setAttribute('href', fileURL);

// add the download attribute with name suggestion
linkElement.setAttribute('download', 'polypane-workspace.ppws')

// add it to the DOM
document.body.appendChild(linkElement);

You’d add it to a specific element of course, not just at the end of the document, but this is just for illustration.

And there you have it, In just a few lines of code you’ve created a file and given it mime type and file name. If you want to try it out, create a Polypane workspace here.