Improve cover upload widget

Nicely formatted, integrated preview, proper drag and drop

lib/music_library_web/components/form_component.ex

@@ -56,24 +56,62 @@ defmodule MusicLibraryWeb.FormComponent do
           type="datetime-local"
           label={gettext("Purchased at")}
         />
-        <div phx-drop-target={@uploads.cover_data.ref}>
+        <div class="col-span-full">
           <.label for={@uploads.cover_data.ref}>
             {gettext("Cover art")}
           </.label>
-          <.error :for={{_index, msg} <- @uploads.cover_data.errors}>{msg}</.error>
+          <div
-          <span
+            phx-drop-target={@uploads.cover_data.ref}
-            :if={@uploads.cover_data.entries == []}
+            class={[
-            class="text-xs sm:text-sm float-right text-zinc-700 dark:text-zinc-400"
+              "mt-2 flex justify-center rounded-lg",
+              "border border-dashed border-zinc-300",
+              "px-6 py-10"
+            ]}
           >
-            {gettext("No cover selected")}
+            <div class="text-center">
-          </span>
+              <svg
-          <%= for entry <- @uploads.cover_data.entries do %>
+                :if={@uploads.cover_data.entries == []}
-            <span class="float-right text-zinc-700 dark:text-zinc-400">{entry.progress}%</span>
+                class="mx-auto size-24 text-zinc-300"
-          <% end %>
+                viewBox="0 0 24 24"
-          <.live_file_input
+                fill="currentColor"
-            class="mt-2 block w-full rounded-lg text-zinc-900 dark:text-zinc-200 focus:ring-0 text-xs sm:text-sm sm:leading-6"
+                aria-hidden="true"
-            upload={@uploads.cover_data}
+                data-slot="icon"
-          />
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              <.live_img_preview
+                :for={entry <- @uploads.cover_data.entries}
+                class="mx-auto size-24"
+                entry={entry}
+              />
+              <div class="mt-4 text-sm/6 text-zinc-600 dark:text-zinc-400">
+                <%= for entry <- @uploads.cover_data.entries do %>
+                  <span>{entry.progress}%</span>
+                <% end %>
+              </div>
+              <div class="mt-4 flex text-sm/6 text-zinc-600 dark:text-zinc-300">
+                <label
+                  for={@uploads.cover_data.ref}
+                  class={[
+                    "relative cursor-pointer rounded-md font-semibold",
+                    "focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2",
+                    "hover:text-zinc-200"
+                  ]}
+                >
+                  <span>{gettext("Upload a file")}</span>
+                  <.live_file_input class="sr-only" upload={@uploads.cover_data} />
+                </label>
+                <p class="pl-1">{gettext("or drag and drop")}</p>
+              </div>
+              <p class="text-xs/5 text-zinc-600 dark:text-zinc-400">
+                {gettext("PNG, JPG, WEBP up to 8MB")}
+              </p>
+            </div>
+          </div>
         </div>
         <:actions>
           <.button phx-disable-with={gettext("Saving...")}>{gettext("Save")}</.button>

priv/gettext/default.pot

@@ -141,11 +141,6 @@ msgstr ""
 msgid "Next"
 msgstr ""
 
-#: lib/music_library_web/components/form_component.ex:68
-#, elixir-autogen, elixir-format
-msgid "No cover selected"
-msgstr ""
-
 #: lib/music_library_web/components/import_component.ex:45
 #, elixir-autogen, elixir-format
 msgid "No results"
@@ -193,7 +188,7 @@ msgstr ""
 msgid "Record imported successfully"
 msgstr ""
 
-#: lib/music_library_web/components/form_component.ex:128
+#: lib/music_library_web/components/form_component.ex:166
 #, elixir-autogen, elixir-format
 msgid "Record updated successfully"
 msgstr ""
@@ -203,12 +198,12 @@ msgstr ""
 msgid "Release"
 msgstr ""
 
-#: lib/music_library_web/components/form_component.ex:79
+#: lib/music_library_web/components/form_component.ex:117
 #, elixir-autogen, elixir-format
 msgid "Save"
 msgstr ""
 
-#: lib/music_library_web/components/form_component.ex:79
+#: lib/music_library_web/components/form_component.ex:117
 #, elixir-autogen, elixir-format
 msgid "Saving..."
 msgstr ""
@@ -680,3 +675,18 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Similar artists"
 msgstr ""
+
+#: lib/music_library_web/components/form_component.ex:111
+#, elixir-autogen, elixir-format
+msgid "PNG, JPG, WEBP up to 8MB"
+msgstr ""
+
+#: lib/music_library_web/components/form_component.ex:105
+#, elixir-autogen, elixir-format
+msgid "Upload a file"
+msgstr ""
+
+#: lib/music_library_web/components/form_component.ex:108
+#, elixir-autogen, elixir-format
+msgid "or drag and drop"
+msgstr ""