How to Upload Files to Phoenix

Working Live View Example that Uploads JSON files

Before you use the code below, you must create a Live View and use the below code as its content.

You must also create the following directory in the priv folder:

priv/static/uploads

# lib/my_app_web/live/upload_live.ex
defmodule AppWeb.PageLive do
  use AppWeb, :live_view

  @impl Phoenix.LiveView
  def mount(_params, _session, socket) do
    {:ok,
    socket
    |> assign(:uploaded_files, [])
    |> allow_upload(:avatar, accept: ~w(.json), max_entries: 1)}
  end

  @impl Phoenix.LiveView
  def handle_event("validate", _params, socket) do
    {:noreply, socket}
  end

  @impl Phoenix.LiveView
  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
    {:noreply, cancel_upload(socket, :avatar, ref)}
  end

  @impl Phoenix.LiveView
  def handle_event("save", _params, socket) do
    uploaded_files =
      consume_uploaded_entries(socket, :avatar, fn meta, entry ->
        dest =
          Path.join([
            "priv",
            "static",
            "uploads",
            "#{entry.client_name}"
          ])

        IO.inspect dest
        # You will need to create `priv/static/uploads` for `File.cp!/2` to work.
        File.cp!(meta.path, dest)

        url_path = static_path(socket, "/uploads/#{Path.basename(dest)}")

        {:ok, url_path}
      end)

    {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}
  end

  defp error_to_string(:too_large), do: "Too large"
  defp error_to_string(:too_many_files), do: "You have selected too many files"
  defp error_to_string(:not_accepted), do: "You have selected an unacceptable file type"

  def render(assigns) do

    ~H"""
    <div>
    <form id="upload-form" phx-submit="save" phx-change="validate">
    <.live_file_input upload={@uploads.avatar} />
    <button type="submit">Upload</button>
    <section phx-drop-target={@uploads.avatar.ref}>

<%!-- render each avatar entry --%>
<%= for entry <- @uploads.avatar.entries do %>
  <article class="upload-entry">


  
    <progress value={entry.progress} max="100"> <%= entry.progress %>% </progress>

    <button type="button" phx-click="cancel-upload" phx-value-ref={entry.ref} aria-label="cancel">&times;</button>

 
    <%= for err <- upload_errors(@uploads.avatar, entry) do %>
      <p class="alert alert-danger"><%= error_to_string(err) %></p>
    <% end %>

    </article>
    <% end %>


  <%= for err <- upload_errors(@uploads.avatar) do %>
    <p class="alert alert-danger"><%= error_to_string(err) %></p>
  <% end %>

  </section>
     </form>


     </div>
    """
  end
end

How to Change LiveView Upload Text

   <.live_file_input upload={@uploads.avatar} class="hidden"/>

    <label for={@uploads.avatar.ref} >
        attach files
    </label>