How To Prompt The User To Download A File

Sometimes we just want to download an image file instead of opening it in the browser. For these situations we can use the download attribute. In this article we’ll learn how to use it and how we can automate its behavior with JavaScript.

The download attribute tells the browser to download a link target when it’s clicked.

<a href="/media/cat.jpeg" download>cat.jpeg</a>

Try it here: cat.jpeg

We can also supply the name of the file by setting the value of the download attribute, in this example we set it to 'my-cat.jpeg'.

<a href="/media/cat.jpeg" download="my-cat.jpeg">cat.jpeg</a>

Try it here: cat.jpeg

Automating the download

Suppose we’ve generated a file in the browser, how can we serve that file to the user without having to ask the user to click a link.

JavaScript to the rescue!

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);
}

We can use it like this:

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

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

Click on the button below to give it a go.

Give me a file