soem changes

lib/zoeyscomputer_web/live/image_live/form_component.ex

@@ -1,4 +1,6 @@
 defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
+  import Mogrify
+  alias Zoeyscomputer.IdGenerator
   use ZoeyscomputerWeb, :live_component
 
   alias Zoeyscomputer.Images
@@ -19,7 +21,24 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
         phx-change="validate"
         phx-submit="save"
       >
-        <.input field={@form[:file]} type="text" label="File" />
+        <.live_file_input upload={@uploads.image} />
+        <section phx-drop-target={@uploads.image.ref}>
+          <%= for entry <- @uploads.image.entries do %>
+            <article class="upload-entry">
+              <figure>
+                <.live_img_preview entry={entry} />
+                <figcaption><%= entry.client_name %></figcaption>
+              </figure>
+              <progress class="w-full" value={entry.progress} max="100">
+                <%= entry.progress %>
+              </progress>
+            </article>
+          <% end %>
+
+          <%= for err <- upload_errors(@uploads.image) do %>
+            <p class="alert alert-danger"><%= error_to_string(err) %></p>
+          <% end %>
+        </section>
         <:actions>
           <.button phx-disable-with="Saving...">Save Image</.button>
         </:actions>
@@ -28,8 +47,18 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
     """
   end
 
+  defp error_to_string(:too_large), do: "Too Large"
+  defp error_to_string(:not_accepted), do: "Not Accepted"
+
+  defp error_to_string(:too_manu_files), do: "Too many files!"
+
   @impl true
   def update(%{image: image} = assigns, socket) do
+    socket =
+      socket
+      |> assign(:uploaded_files, [])
+      |> allow_upload(:image, accept: ~w(.jpg .jpeg .png), max_entries: 2)
+
     {:ok,
      socket
      |> assign(assigns)
@@ -44,8 +73,29 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
     {:noreply, assign(socket, form: to_form(changeset, action: :validate))}
   end
 
-  def handle_event("save", %{"image" => image_params}, socket) do
-    save_image(socket, socket.assigns.action, image_params)
+  @impl true
+  def handle_event("save", _params, socket) do
+    uploaded_files =
+      consume_uploaded_entries(socket, :image, fn %{path: path}, _entry ->
+        dest = Path.join("/tmp/", Path.basename(path))
+        File.cp(path, dest)
+
+        handle_upload(dest)
+      end)
+
+    update(socket, :uploaded_files, &(&1 ++ uploaded_files))
+
+    save_image(socket, socket.assigns.action, %{file: uploaded_files})
+  end
+
+  @impl true
+  def handle_event("validate", _params, socket) do
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
+    {:noreply, cancel_upload(socket, :image, ref)}
   end
 
   defp save_image(socket, :edit, image_params) do
@@ -63,6 +113,27 @@ defmodule ZoeyscomputerWeb.ImageLive.FormComponent do
     end
   end
 
+  defp handle_upload(path) do
+    id = IdGenerator.generate()
+    key = "uploads/#{id}.png"
+    bucket = "imgs"
+
+    try do
+      image = open(path) |> format("png") |> save()
+      IO.inspect(image)
+
+      {:ok, new_file_binary} = File.read(image.path)
+
+      case ExAws.S3.put_object(bucket, key, new_file_binary, %{content_type: "image/png"})
+           |> ExAws.request() do
+        {:ok, _response} -> {:ok, id}
+        {:error, reason} -> {:error, reason}
+      end
+    after
+      File.rm(path)
+    end
+  end
+
   defp save_image(socket, :new, image_params) do
     case Images.create_image(image_params) do
       {:ok, image} ->

lib/zoeyscomputer_web/live/image_live/index.ex

@@ -7,6 +7,7 @@ defmodule ZoeyscomputerWeb.ImageLive.Index do
   @impl true
   def mount(_params, _session, socket) do
     current_user = socket.assigns.current_user
+
     {:ok, stream(socket, :images, Images.list_images_by_user(current_user))}
   end