Style upload form

lib/mihainator_web/live/upload_live.ex

@@ -6,24 +6,23 @@ defmodule MihainatorWeb.UploadLive do
     {:ok,
      socket
      |> assign(:uploaded_files, [])
-      |> allow_upload(:avatar, accept: ~w(.csv .jpeg))}
+     |> assign(:submit_disabled?, true)
+     |> allow_upload(:history, accept: ~w(.csv))}
   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)}
+    {:noreply,
+     socket
+     |> assign(:submit_disabled?, false)}
   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)
+      consume_uploaded_entries(socket, :history, fn %{path: path}, _entry ->
+        line_count =
+          File.stream!(path)
           |> Enum.count()
 
         IO.puts(line_count)

lib/mihainator_web/live/upload_live.html.heex

@@ -1,39 +1,52 @@
-<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>
+<div class="flex flex-col space-y-8">
+  <h1 class="text-5xl">Threema history checker</h1>
 
-    <.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">
+  <p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p>
+
+  <form id="upload-form" phx-submit="save" phx-change="validate" class="flex flex-col space-y-4">
+    <div>
+      <label class="block mb-2 text-sm font-bold text-gray-900" for={@uploads.history.ref}>
+        CSV file
+      </label>
+
+      <.live_file_input
+        upload={@uploads.history}
+        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"
+      />
+    </div>
+
+    <button
+      :if={@submit_disabled?}
+      disabled={@submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
+      type="submit"
+    >
+      Upload
+    </button>
+
+    <button
+      :if={not @submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end"
+      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 %>
+  <%= for entry <- @uploads.history.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 %>
+      <%= for err <- upload_errors(@uploads.history, entry) do %>
         <p class="alert alert-danger"><%= error_to_string(err) %></p>
       <% end %>
-
     </article>
   <% end %>
 
+  <%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
+  <section phx-drop-target={@uploads.history.ref}>
     <%!-- Phoenix.Component.upload_errors/1 returns a list of error atoms --%>
-    <%= for err <- upload_errors(@uploads.avatar) do %>
+    <%= for err <- upload_errors(@uploads.history) do %>
       <p class="alert alert-danger"><%= error_to_string(err) %></p>
     <% end %>
-
   </section>
+</div>