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

Phoenix Forum Questions / Help
,
1

I am coding my first Liveview application. Liveview is awesome, but I have been stumped on something for several days now and need some help.

My Liveview application needs to download a file to the client’s browser. My Liveview page renders a button for doing the download.

Summary of behaviour that I see:
a) The controls (dropboxes, buttons) on the Liveview page work fine
b) When the Download button is pressed, the file is downloaded. The displayed page is still the Liveview page.
c) At this point, the Liveview code stops working. The controls no longer work (including the Download button).

Liveview supports uploads out-of-the-box, but does not support downloads. I found two threads (one and two) which say that in order to download a file, it is recommended to redirect to a
Phoenix Controller.

My Liveview application redirects to a Phoenix controller, which in turn downloads the file. This part works fine. There are several options for downloading files to the client browser (Phoenix.Controller.send_download, Plug.Conn.send_file, or Plug.Conn.chunk). All of these options make use of the ‘Conn’ object.

My Liveview code that handles the download button event:

@impl true
def handle_event("download-btn-event", _, socket) do
    {:noreply, socket |> redirect(to: "/api/download")}
end

And an exerpt of router.ex:

scope "/api", MyApplicationWeb.Api, as: :api do
    pipe_through :api
    get "/download", DownloadController, :download
end

And the Phoenix Controller code is defined like this:

defmodule MyApplicationWeb.Api.DownloadController do
    use MyApplicationWeb, :controller

    @filename "Downloaded.csv"

    def download(conn, params) do
        conn =
            conn
            |> put_resp_content_type("text/csv")
            |> put_resp_header("content-disposition", ~s[attachment; filename="#{@filename}"])
            |> ...
            |> Phoenix.Controller.send_download({:file, path})
    #     |> Phoenix.Controller.redirect(to: "/myapplication")
    #     |> halt

Inside this Phoenix controller action I have tried returning Conn, or redirecting the connection back to liveview (to use my router.ex to bring the user back to Liveview page), or halting the Conn process. The commented out stuff are ideas I was trying. In particular, the redirect idea gives an error like this:

** (exit) an exception was raised:
** (Plug.Conn.AlreadySentError) the response was already sent

I found this excerpt at Plug.Conn — Plug v1.16.1 :

The connection state is used to track the connection lifecycle. It starts as :unset but is changed to :set (via resp/3) or :set_chunked (used only for before_send callbacks by send_chunked/2) or :file (when invoked via send_file/3). Its final result is :sent, :file or :chunked depending on the response model.

I think the above shown error is because the Conn was already used to send the file, and so it does not allow the Conn to be re-used for another purpose (like redirecting to another page) ?

Once the file has been downloaded, I want the user to continue interacting with the Liveview.

An alternate idea I has was to spawn a separate process for doing the download (for example: following advice like Setup a supervised background task in Phoenix or this thread on handling background jobs with elixir/phoenix. And sure enough I am able to spawn a background process, but that process does not have a ‘Conn’ object so it can’t do the file download.

So, I’m stuck.

Questions:

  1. How to redirect from Liveview to Phoenix, get the file downloaded to the user, and then redirect back to Liveview again (need to re-use the Conn object after the file download) ?
    Alternatively, how to launch a background task that has the ‘Conn’ so it can carry out a file download asynchronously?
  2. Assuming the redirect approach, does it matter if I redirect to a Phoenix controller that is setup via pipe_through :api or :browser in router.ex?
  3. (Bonus points) Is there a way to be notified when the file has been downloaded? I’ve like to put a flash message on the screen, if possible. With the background process, I was thinking Async.await() could be used. For the send_download from Controller approach, I have no idea how to know when the download has finished.

Thanks for reading!

5 Likes
2

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.

5 Likes
3

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?

2 Likes
4

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 v0.20.2) 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.

3 Likes
5

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.

6

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
7

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 v0.17.10 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.

12 Likes
8

@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?

1 Like
9

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

1 Like
10

@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™.

7 Likes
11

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.

2 Likes
12

Hi @evadne, thanks for the hint. I was just wondering, as someone with little JS experience, shall this URI be actually the URL to the saved report file in priv/static or maybe actual binary? I will dig into the docs you recommended. To be more clear, I’m following this guide: Phoenix/Elixir — Export data to XLSX | by Sergey Chechaev | Medium. My ExcelController is the same as his PostController, and I’m generating the report in memory in a view as well:

defmodule FlipWeb.ExcelView do
  use FlipWeb, :view

  def render("report.xlsx", %{report: report}) do
    report
    |> Elixlsx.write_to_memory("report.xlsx")
    |> IO.inspect()
    |> elem(1)
    |> elem(1)
  end
end

So, the push_event would send the actual binary generated by Elixlsx.write_to_memory("report.xlsx") as URI ? Or should I materialize it as a file first and send URL?

13

Would urge consideration of how Phoenix applications usually work

For your situation would suggest the following

  • write function in controller which serves content
  • generate path to this function via routes helper
  • push said URI
1 Like
14

Now I get it :slight_smile: thanks!

15

I also ended up with the first sequence of:

  • a 1st modal form submit creates the content, pops up a second modal and hides itself.
  • In the second modal the link to download the content is rendered…
    Not sure how … idiomatic this is … and clearly requires 2 clicks… but it works…
16

I tend to open the download link in a new tab, this is a strategy I’ve seen used by a lot of platforms. You could even add some js so it closes automatically.

17

Simplest solution for small dynamic content to be saved as files:

{:noreply,
  socket |> push_event("download-file", %{
    text: "Your file contents",
    filename: "#{:os.system_time(:millisecond)}.txt"
})

and on a Hook:

    this.handleEvent("download-file", (event) => {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(event.text));
        element.setAttribute('download', event.filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      });
9 Likes
18

I used this method recently, but sending an Excel sheet over the websocket gave encoding errors. Instead of sending the file, I wrote it to “/tmp/special_folder/special_file” and created a static plug to serve files from that directory. Then I send the url to the resource over the websocket and set that as the “href” attribute.

So in endpoint.ex:

plug Plug.Static,
  at: "/special_path/",
  from: "/tmp/special_path"

and then in the Hook:

element.setAttribute('href', event.url)
19

Now you can just do

<.link href={~p"/file/to-download"} download>
  <button type="button">Download</button>
</.link>

I used to have a custom event that added an invisible iframe to do this, but it is no longer necessary.

1 Like
20

Yes, that is true, but I wanted the file to be sent on a form submit. Until forms support GET, I could not figure it out.