Prototype CSV file upload

lib/mihainator_web/live/upload_live.ex

@@ -0,0 +1,39 @@
+defmodule MihainatorWeb.UploadLive do
+  use MihainatorWeb, :live_view
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    {:ok,
+      socket
+      |> assign(:uploaded_files, [])
+      |> allow_upload(:avatar, accept: ~w(.csv .jpeg))}
+  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 %{path: path}, _entry ->
+        line_count = File.stream!(path)
+        |> Enum.count()
+
+        IO.puts(line_count)
+
+        {:ok, line_count}
+      end)
+
+    {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}
+  end
+
+  defp error_to_string(:too_large), do: "Too large"
+  defp error_to_string(:not_accepted), do: "You have selected an unacceptable file type"
+end

lib/mihainator_web/live/upload_live.html.heex

@@ -0,0 +1,39 @@
+<form id="upload-form" phx-submit="save" phx-change="validate">
+    <label class="block mb-2 text-sm font-medium text-gray-900" for={@uploads.avatar.ref}>Avatar</label>
+
+    <.live_file_input upload={@uploads.avatar} class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />
+    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">
+        Upload
+    </button>
+</form>
+
+<%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
+<section phx-drop-target={@uploads.avatar.ref}>
+    <%= for entry <- @uploads.avatar.entries do %>
+    <article class="upload-entry">
+
+        <figure>
+            <.live_img_preview entry={entry} />
+            <figcaption><%= entry.client_name %></figcaption>
+        </figure>
+
+        <%!-- entry.progress will update automatically for in-flight entries --%>
+        <progress value={entry.progress} max="100"> <%= entry.progress %>% </progress>
+
+        <%!-- a regular click event whose handler will invoke Phoenix.LiveView.cancel_upload/3 --%>
+        <button type="button" phx-click="cancel-upload" phx-value-ref={entry.ref} aria-label="cancel">&times;</button>
+
+        <%!-- Phoenix.Component.upload_errors/2 returns a list of error atoms --%>
+        <%= for err <- upload_errors(@uploads.avatar, entry) do %>
+        <p class="alert alert-danger"><%= error_to_string(err) %></p>
+        <% end %>
+
+    </article>
+    <% end %>
+
+    <%!-- Phoenix.Component.upload_errors/1 returns a list of error atoms --%>
+    <%= for err <- upload_errors(@uploads.avatar) do %>
+    <p class="alert alert-danger"><%= error_to_string(err) %></p>
+    <% end %>
+
+</section>

lib/mihainator_web/router.ex

@@ -18,6 +18,7 @@ defmodule MihainatorWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :home
+    live "/upload", UploadLive
   end
 
   # Other scopes may use custom stacks.