With Liveview, what is best way to download a file to the user's browser?

Welcome to the forum @GeorgeMiller !

is there a reason why you couldn’t trigger the download with an ordinary link to a file in the priv/static folder?

1. When your file is created (let’s call it data.csv), copy it to priv/static/. You can get the location of the priv folder using :code.priv_dir(:your_app_name).

2. Create a download link in your view:

 <%= link "Download", to: Routes.static_path(@socket, "data.csv"), target: "_blank" %>

(You will have to add the csv extension to the list of accepted extensions in the configuration for Plug.Static in your endpoint for the download to work)

No need to write a custom controller and set response headers. The download will be handled by Plug.Static which will also set all the necessary headers.

Hi @trisolaran,

Thank you for the well-thought out response. I like what you are saying, and those instructions are clear.

I should add specifications for the problem I am solving. The application stores data in a database and the Liveview webpage displays a table of this data. The other webpage controls (input fields, dropboxes) are filtering/updating the data being displayed. And then the Download button dynamically creates the data file for download, considering the settings of all the filters.

Given these specifications (sorry, I should have given them in the original post), I do not have a path to the file at the time that the page is rendered. The file is generated dynamically after the page is rendered.

The data file can be quite large, which is the reason there are filters.

Having said that, I guess one idea is to setup a download link as you suggest, and then dynamically re-write the contents of the file (in priv/static) each time a filter is applied. The issue would be that perhaps the download file is being re-written at the time that the download button is pressed?

Hi,

Thanks, the problem is clearer now. Some quick comments:

And then the Download button dynamically creates the data file for download, considering the settings of all the filters.

When you dynamically create the file based on the applied filters, you could create it in the /priv/static folder directly

and then dynamically re-write the contents of the file (in priv/static) each time a filter is applied

I think this would be rather inefficient and slow. You can update the view whenever the filter is applied, and when the user is sure that the data they see is what they want to download, they could hit the download button. Only then do you need to create the file. You don’t need to re-create the file whenever a filter is applied (if I understood the application correctly).

Your application could then render the download link after the the file creation is completed, and the user can click it to download the file.

Something like: user applies filters to table → users hits download button → file is created → download link is rendered → user clicks the download link

This would be quite easy and work well AFAICS.

But what you’d like to have is slightly different:

user applies filters to table → user hits download button → file is created → frontend downloads the file

So everything done with a single user interaction.

I’m not sure, but my feeling is that if you want to achieve this you are gonna have to write some Javascript. Just a random idea: you could render an invisible download link and have a liveview client hook (JavaScript interoperability — Phoenix LiveView v1.2.5) that uses axios or similar library to download the file when the link is rendered, without involving the user. This might be a viable option, but I haven’t thought it through.

If your dynamically generated data is small and you don’t care about some overhead, you can just push_event to the client side. You will have to base64 encode the data so it can pass in json. and you may have to chunk it; however, you don’t have to leave the comfort of your liveview.

Hi @GeorgeMiller. Have you managed to resolve this issue? I have exactly the same case and don’t know how to properly download a file with “redirecting to controller” scenario. I’m able to download a file but my LV hangs after redirect.

LV:

  @impl true
  def handle_event(
        "generate_excel_report",
        _,
        %{assigns: %{report: report}} = socket
      ) do
    Cachex.put(:cache, "report", report)
    {:noreply, redirect(socket, to: Routes.excel_path(socket, :index))}
  end

Controller:

defmodule FlipWeb.ExcelController do
  use FlipWeb, :controller

  def index(conn, _params) do
    {:ok, report} = Cachex.get(:cache, "report")

    conn
    |> put_resp_content_type("text/xlsx")
    |> put_resp_header("content-disposition", "attachment; filename=report.xlsx")
    |> render("report.xlsx", %{report: report})
  end
end

Sorry, old code follows, this has worked for 10+ years:

jQuery('<iframe>').attr('src', file.url).hide().appendTo(jQuery(document.body))

So let’s adapt it to modern JS / LV interop with this in the body:

window.addEventListener(`phx:download`, (event) => {
  let uri = event.uri;
  let frame = document.createElement("iframe");
  frame.setAttribute("src", response.uri);
  frame.style.visibility = 'hidden';
  frame.style.display = 'none';
  document.body.appendChild(frame);
});

Then from the LiveView you use push_event at the appropriate juncture (name of event, would be download in this case, and it would have the URI) — win/win solution, no redirection (so you keep the LV running), the download proceeds via the same authentication system you have used (as it will go through a known set of Plugs), and the file is downloaded!! Plus this would work nice with things you have to stream (such as via Packmatic etc)

Would recommend reading JavaScript interoperability — Phoenix LiveView v1.2.5 thoroughly.

PS: Could also use a phx-ignore container to hang your iframe in, or just make some space for it in your layout where LV would not touch, all depending on how your app is set up

PS 2: Redirecting away from a LV to something with content-disposition that is not inline probably causes what @ppiechota is seeing. So avoiding full redirection (you can’t get back easily, anyway) or anything that would cause the LV to stop running, would be key here.

@GeorgeMiller - thanks for asking this question and detailing your requirements. I’m working on a feature that has the same requirements, so this thread has been golden.

Using @trisolaran’s suggestion of the Routes.static_path helper along with @evadne’s sample JavaScript code is working beautifully with a sample csv file.

Another requirement we might have in common is that the generated files are meant to be temporary and don’t need to be saved on the server after they’ve been downloaded. Curious if anyone has a strategy they like for deleting the files after download, or after some period of time?

Use a dedicated S3 bucket with lifecycle policy to remove objects after X days.

@abbyjones @ppiechota @GeorgeMiller The server-side redirect is definitely the issue. If you redirect on the server, then the LiveView process shuts down. However since the download redirect does not change the browser document’s location, the (now disconnected) LiveView page is still accessible to the end-user.

I like @evadne’s solution if you want to force the download to start automatically. Generally I prefer to just render a download link. If the response sends content-disposition: attachment;... then everything else Just Works™.

In Liv every mail attachment is downloaded in-band, through the same Liveview websocket, so I don’t need to worry about liveview disconnect, temp file, or S3 buckets. Everything download automatically into blob urls in the web page. The caveat is that you can’t do very large files. A few files, each a few megabytes are no trouble at all.