Call/redirect to controller path from LV server side

Phoenix Forum Questions / Help
,
1

in my system, I have a path /csv/exporter that runs a controller that will get some data in CSV format and allow the user to download it.

Until now, I was able to call it directly from a LV page by using something like this:

<.link href={~p"/csv/exporter?#{@params}"}>Export</.link>

But now, I have a requirement that I call that url for the user from the server side after a form validation, something like this:

def handle_event("submit_export", %{"form" => form}, socket) do
  # Handles form and generates a params variable
  ...
  
  {:noreply, redirect(socket, external: ~p"/csv/exporter?#{@params}")}
end

This will call the CSV route and the user will get the CSV downloaded, but, it will also disconnect the page LV websocket and never reconnect it again since it assumes that the page will be redirected for some other page (which it doesn’t since this redirect is not to a page but to the CSV file directly).

I also tried using push_navigate without success.

The only way I found that worked was a workaround by having a custom hook that I send a push_event to it and the hook will call the url directly from the client instead of doing it from the server side.

So, is there some way to achieve that directly from server side (maybe some way to tell that the redirect needs to be in another tab/window?)?

2

You should do this from JS, @LostKobrakai has a good example somewhere on this forum.

3

I couldn’t find his post, but right now here is my solution (which I’m not happy with tbh, I feel that something like this should be supported out-of-box in LV).

In app.js:

    // Open url in new tab/window
    window.addEventListener(
      "phx:open-url-in-new-window",
      ({ detail: {url} }) => {
        window.open(url, "_blank", "noopener, noreferrer")
      }
    )

In a JSExtra module:

  @spec open_url_in_new_window(Socket.t(), String.t()) :: Socket.t()
  def open_url_in_new_window(socket, url),
    do: Phoenix.LiveView.push_event(socket, "open-url-in-new-window", %{url: url, to: "html"})

And then I use it like this in my handle_event call:

def handle_event("submit_export", %{"form" => form}, socket) do
  # Handles form and generates a params variable
  ...
  
  {:noreply, JSExtra.open_url_in_new_window(socket, ~p"/csv/exporter?#{@params}")}
end
4

I don’t believe you need this kind of indirection. This could be entirely client side without having to go back to your liveview. There are JS commands for this kind of stuff Phoenix.LiveView.JS — Phoenix LiveView v1.0.17 but I’m afraid it wont open a new tab in the background.

You could properly get away with using a traditional link

5

Not sure if I understand your suggestion, the final url is only generated during the “submit” event in my form, hence why I want to do the redirect from the server side.

6

I’d create an event listener combined with push_event, which creates a temp link with download attribute on the body and clicks it. That way you get all the benefits of no new tab, but also the LV page not stopped. Maybe there could be a JS.push_download(url), but it’s not too hard to build that with existing primitives.

3 Likes
7

Yep, that did the trick, I changed my event listener to this:

    // Open download file url
    window.addEventListener(
      "phx:open-download-file-url",
      ({ detail: { url, filename } }) => {
        const link = document.createElement("a");

        link.href = url;
        link.download = filename || "download";
        link.style.display = "none";

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
    );

And now it works!