Download button

Learn
1

HI,

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.

2

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.

3 Likes
3

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?

Thanks.

4

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 "https://whatever.xyz" ] [ text “Save” ]

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

3 Likes
5

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

6

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. https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh779016(v=vs.85)

1 Like