Published at
Updated at
Reading time
1min

I'm just parking the following snippet for the future. 🙈

Years ago, I had to fiddle around with dynamic file downloads in a single page application. And let me tell you that it was very painful. Rik Schennink shared a snippet to trigger file downloads. That code will come in handy for my future self!

function downloadFile(file) {
  // Create a link and set the URL using `createObjectURL`
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = URL.createObjectURL(file);
  link.download = file.name;

  // It needs to be added to the DOM so it can be clicked
  document.body.appendChild(link);
  link.click();

  // To make this work on Firefox we need to wait
  // a little while before removing it.
  setTimeout(() => {
    URL.revokeObjectURL(link.href);
    link.parentNode.removeChild(link);
  }, 0);
}

// Dynamically create a File
const myFile = new File([`${new Date()}: Meow!`], "my-cat.txt");

// Download it using our function
downloadFile(myFile);

Thanks Rik!

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 14 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles