How to Upload Files to Phoenix
From ElixirBlocks
Working Live View Example
# 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">×</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