Download button


I am a newbie. I have created most of a web page but am stuck in providing a download button for file download. I want to do a simple download with the following features:

  1. Provide a “Download” button.
  2. Prompt the user with a file dialog box when the download button is pressed.
  3. Then download a file (that I generate on the server) and save it to user’s local system.

Any help is appreciated. Thanks.

You probably want to use a link with the download attribute set, styled to look like a button. The Html.Attributes module has download and downloadAs as aliases, depending on whether or not you want to provide a suggested file name.

Alternatively, you could have the response from your server set the Content-Disposition header to attachment. That will probably work better in older browsers.


Thanks for the reply. In Elm, I am using the following:

button [ onClick <| Download ] [ text “Save” ]

Where should I add the attributes that you mention? Do I have to do the download function as a Javascript set of methods and define ports or can I just add the attribute to the button object?


I think to do exactly what you want to do is not possible; browsers don’t let a web page decide where a file is placed. I think what @matt.cheely was suggesting was more like:

a [ download True, href "" ] [ text “Save” ]

This will mean that when someone clicks on your link, it will be downloaded and not displayed.


Ok. Understood. Thanks. I will try out what you and @matt.cheely are suggesting. Thanks for your help and thanks @matt.cheely for yours.

Note that this feature is not supported in Internet Explorer. If you need to trigger a download there, you will probably need ports to use the supported method.

1 Like