From 469357bc1b08421695a542ddde51c603bed5423d Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Tue, 1 Oct 2024 16:00:10 +0100 Subject: [PATCH 01/13] feat: add height and width for component --- lib/atomic_web/components/image_uploader.ex | 32 +++++++++------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 977f3357..7ff53319 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -4,6 +4,8 @@ defmodule AtomicWeb.Components.ImageUploader do The component attributes are: @uploads - the uploads object @target - the target to send the event to + @width - the width of the uploader area + @height - the height of the uploader area The component events the parent component should define are: cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute. @@ -18,26 +20,20 @@ defmodule AtomicWeb.Components.ImageUploader do
-
-
-
- -
- -

or drag and drop

-
-

- PNG, JPG, GIF up to 10MB -

+
+
+ +
+ +

or drag and drop

+

PNG, JPG, GIF up to 10MB

From fdb3bf3895717bea51c652d3e057aabf35530e18 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Fri, 4 Oct 2024 23:12:56 +0100 Subject: [PATCH 02/13] feat: trying multiple image_uploader in the same page --- lib/atomic_web/components/image_uploader.ex | 13 ++++++++----- lib/atomic_web/components/sidebar.ex | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 7ff53319..839b3760 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -6,6 +6,7 @@ defmodule AtomicWeb.Components.ImageUploader do @target - the target to send the event to @width - the width of the uploader area @height - the height of the uploader area + @id - a unique identifier for this uploader instance The component events the parent component should define are: cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute. @@ -13,15 +14,17 @@ defmodule AtomicWeb.Components.ImageUploader do use AtomicWeb, :live_component def render(assigns) do + unique_ref = assigns.id <> "_upload" # Generate a unique reference using the passed id + ~H"""
<.live_file_input upload={@uploads.image} class="hidden" />
+ } phx-drop-target={unique_ref}>

or drag and drop

@@ -48,9 +51,9 @@ defmodule AtomicWeb.Components.ImageUploader do
<%= if String.length(entry.client_name) < 30 do %> - <% entry.client_name %> + <%= entry.client_name %> <% else %> - <% String.slice(entry.client_name, 0..30) <> "... " %> + <%= String.slice(entry.client_name, 0..30) <> "... " %> <% end %>
+
+ + <% end %> -
-
- <.live_img_preview entry={entry} /> -
-
- <%= if String.length(entry.client_name) < 30 do %> - <%= entry.client_name %> - <% else %> - <%= String.slice(entry.client_name, 0..30) <> "... " %> - <% end %> -
- -
-
-
- <% end %> - +
""" diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index b0e08334..3dd8f6a1 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -9,7 +9,8 @@ defmodule AtomicWeb.ProfileLive.FormComponent do def mount(socket) do {:ok, socket - |> allow_upload(:picture, accept: @extensions_whitelist, max_entries: 1)} + |> allow_upload(:picture_1, accept: @extensions_whitelist, max_entries: 1) + |> allow_upload(:picture_2, accept: @extensions_whitelist, max_entries: 1)} end @impl true @@ -68,21 +69,26 @@ defmodule AtomicWeb.ProfileLive.FormComponent do end defp consume_image_data(socket, user) do - consume_uploaded_entries(socket, :image, fn %{path: path}, entry -> + consume_uploaded_entries(socket, :picture_1, fn %{path: path}, entry -> Accounts.update_user(user, %{ - "image" => %Plug.Upload{ + "image_1" => %Plug.Upload{ content_type: entry.client_type, filename: entry.client_name, path: path } }) end) - |> case do - [{:ok, user}] -> - {:ok, user} - _errors -> - {:ok, user} - end + consume_uploaded_entries(socket, :picture_2, fn %{path: path}, entry -> + Accounts.update_user(user, %{ + "image_2" => %Plug.Upload{ + content_type: entry.client_type, + filename: entry.client_name, + path: path + } + }) + end) + + {:ok, user} end end diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex index 6e070501..8d741b29 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -47,10 +47,11 @@
<%= error_tag(f, :phone_number) %>
- <.live_file_input upload={@uploads.picture} class="hidden" /> - + <.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_1" uploads={@uploads} upload_name={:picture_1} target={@myself} /> + +
@@ -59,8 +60,36 @@
- <%= for entry <- @uploads.picture.entries do %> - <%= for err <- upload_errors(@uploads.picture, entry) do %> + <%= for entry <- @uploads.picture_1.entries do %> + <%= for err <- upload_errors(@uploads.picture_1, entry) do %> +

<%= Phoenix.Naming.humanize(err) %>

+ <% end %> +
+
+ <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" /> +
+
+ <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" /> +
+
+ <% end %> +
+ + <.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_2" uploads={@uploads} upload_name={:picture_2} target={@myself} /> + + +
+
+ <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" /> +
+
+
+ <%= for entry <- @uploads.picture_2.entries do %> + <%= for err <- upload_errors(@uploads.picture_2, entry) do %>

<%= Phoenix.Naming.humanize(err) %>

<% end %>
From be2063ebf60ebc17a282a908b666c036a1c6c591 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Sun, 6 Oct 2024 01:28:56 +0100 Subject: [PATCH 06/13] code format --- lib/atomic_web/components/image_uploader.ex | 46 ++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index e7356ee7..34526b68 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -21,30 +21,30 @@ defmodule AtomicWeb.Components.ImageUploader do
<.live_file_input upload={@uploads[@upload_name]} class="hidden" id={unique_ref <> "_file"} /> -
- <%= for entry <- @uploads[@upload_name].entries do %> - <%= for err <- upload_errors(@uploads[@upload_name], entry) do %> -

<%= Phoenix.Naming.humanize(err) %>

- <% end %> -
-
- <.live_img_preview entry={entry} /> -
-
- <%= if String.length(entry.client_name) < 30 do %> - <%= entry.client_name %> - <% else %> - <%= String.slice(entry.client_name, 0..30) <> "... " %> - <% end %> -
- -
-
-
+
+ <%= for entry <- @uploads[@upload_name].entries do %> + <%= for err <- upload_errors(@uploads[@upload_name], entry) do %> +

<%= Phoenix.Naming.humanize(err) %>

<% end %> -
+
+
+ <.live_img_preview entry={entry} /> +
+
+ <%= if String.length(entry.client_name) < 30 do %> + <%= entry.client_name %> + <% else %> + <%= String.slice(entry.client_name, 0..30) <> "... " %> + <% end %> +
+ +
+
+
+ <% end %> +
""" From eb0812977a19d74ba05bc760eb9392a9e691e278 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Sun, 6 Oct 2024 14:06:14 +0100 Subject: [PATCH 07/13] feat: restore files because nothing works --- lib/atomic_web/components/image_uploader.ex | 34 +++++++++++---- .../profile_live/form_component.html.heex | 41 +++---------------- 2 files changed, 31 insertions(+), 44 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 34526b68..7ff53319 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -6,7 +6,6 @@ defmodule AtomicWeb.Components.ImageUploader do @target - the target to send the event to @width - the width of the uploader area @height - the height of the uploader area - @id - a unique identifier for this uploader instance The component events the parent component should define are: cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute. @@ -14,16 +13,33 @@ defmodule AtomicWeb.Components.ImageUploader do use AtomicWeb, :live_component def render(assigns) do - # Generate a unique reference using the passed id - unique_ref = assigns.id <> "_upload" - ~H"""
- <.live_file_input upload={@uploads[@upload_name]} class="hidden" id={unique_ref <> "_file"} /> + <.live_file_input upload={@uploads.image} class="hidden" /> +
+
+
+ +
+ +

or drag and drop

+
+

PNG, JPG, GIF up to 10MB

+
+
+
- <%= for entry <- @uploads[@upload_name].entries do %> - <%= for err <- upload_errors(@uploads[@upload_name], entry) do %> + <%= for entry <- @uploads.image.entries do %> + <%= for err <- upload_errors(@uploads.image, entry) do %>

<%= Phoenix.Naming.humanize(err) %>

<% end %>
@@ -32,9 +48,9 @@ defmodule AtomicWeb.Components.ImageUploader do
<%= if String.length(entry.client_name) < 30 do %> - <%= entry.client_name %> + <% entry.client_name %> <% else %> - <%= String.slice(entry.client_name, 0..30) <> "... " %> + <% String.slice(entry.client_name, 0..30) <> "... " %> <% end %>
- <.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_1" uploads={@uploads} upload_name={:picture_1} target={@myself} /> - - + <.live_file_input upload={@uploads.picture} class="hidden" /> +
@@ -60,36 +59,8 @@
- <%= for entry <- @uploads.picture_1.entries do %> - <%= for err <- upload_errors(@uploads.picture_1, entry) do %> -

<%= Phoenix.Naming.humanize(err) %>

- <% end %> -
-
- <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" /> -
-
- <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" /> -
-
- <% end %> -
- - <.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_2" uploads={@uploads} upload_name={:picture_2} target={@myself} /> - - -
-
- <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" /> -
-
-
- <%= for entry <- @uploads.picture_2.entries do %> - <%= for err <- upload_errors(@uploads.picture_2, entry) do %> + <%= for entry <- @uploads.picture.entries do %> + <%= for err <- upload_errors(@uploads.picture, entry) do %>

<%= Phoenix.Naming.humanize(err) %>

<% end %>
@@ -112,4 +83,4 @@ <% end %>
-
+
\ No newline at end of file From 865d575c08a25266608109df05a9a24d86f7a038 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Sun, 6 Oct 2024 14:07:52 +0100 Subject: [PATCH 08/13] code format --- lib/atomic_web/live/profile_live/form_component.html.heex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex index c7542ea1..6e070501 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -83,4 +83,4 @@ <% end %> - \ No newline at end of file + From 16a179288012029351a284b9583554c836550c61 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Sun, 6 Oct 2024 15:04:57 +0100 Subject: [PATCH 09/13] feat: add max_size for component --- lib/atomic_web/components/image_uploader.ex | 20 +++++++++---------- .../live/profile_live/form_component.ex | 4 ++-- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 7ff53319..1b94ac76 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -1,18 +1,16 @@ defmodule AtomicWeb.Components.ImageUploader do @moduledoc """ An image uploader component that allows you to upload an image. - The component attributes are: - @uploads - the uploads object - @target - the target to send the event to - @width - the width of the uploader area - @height - the height of the uploader area - - The component events the parent component should define are: - cancel-image - cancels the upload of an image. This event should be defined in the component that you passed in the @target attribute. """ + use AtomicWeb, :live_component + import Atomic.Uploader def render(assigns) do + max_size = Atomic.Uploader.max_size() + + assigns = Map.put(assigns, :max_size, max_size) + ~H"""
@@ -33,7 +31,7 @@ defmodule AtomicWeb.Components.ImageUploader do

or drag and drop

-

PNG, JPG, GIF up to 10MB

+

PNG, JPG, GIF up to <%= @max_size %>KB

@@ -48,9 +46,9 @@ defmodule AtomicWeb.Components.ImageUploader do
<%= if String.length(entry.client_name) < 30 do %> - <% entry.client_name %> + <%= entry.client_name %> <% else %> - <% String.slice(entry.client_name, 0..30) <> "... " %> + <%= String.slice(entry.client_name, 0..30) <> "... " %> <% end %>
- <.live_file_input upload={@uploads.picture} class="hidden" /> - -
-
- <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" /> -
-
-
- <%= for entry <- @uploads.picture.entries do %> - <%= for err <- upload_errors(@uploads.picture, entry) do %> -

<%= Phoenix.Naming.humanize(err) %>

- <% end %> -
-
- <.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white text-opacity-0 rounded-full group-hover:text-opacity-100" /> -
-
- <.live_img_preview entry={entry} class="object-cover object-center rounded-full w-40 h-40 sm:w-48 sm:h-48 border-4 border-white" /> -
-
- <% end %> -
- + <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %> + <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="1" /> + <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="2"/>
<%= submit do %> From 709243bd47aadf4abba3b630a7b7bd867dba68e3 Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Wed, 9 Oct 2024 12:25:04 +0100 Subject: [PATCH 11/13] feat: add size_file to component --- lib/atomic_web/components/image_uploader.ex | 4 ++-- lib/atomic_web/live/profile_live/form_component.html.heex | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index e41bf7a3..ac0c3eb9 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -26,8 +26,8 @@ defmodule AtomicWeb.Components.ImageUploader do

or drag and drop

-

PNG, JPG, GIF up to 10KB

- +

PNG, JPG, GIF up to <%= @size_file %>

+
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex index 8e4b0fa3..a5e533f8 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -48,8 +48,8 @@ <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="1" /> - <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="2"/> + <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="1" size_file="10KB"/> + <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="2" size_file="100KB"/>
<%= submit do %> From 04762adf706bf5da75be0ea6cea32b6aba84689b Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Wed, 9 Oct 2024 12:25:24 +0100 Subject: [PATCH 12/13] feat: add size_file to component --- lib/atomic_web/live/profile_live/form_component.html.heex | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex index a5e533f8..20101317 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -48,8 +48,8 @@
<%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="1" size_file="10KB"/> - <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} class="h-100px w-100px" id="2" size_file="100KB"/> + <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="10KB"/> + <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="100KB"/>
<%= submit do %> From 1dde47930a65e93f407340fcc220133519bffc4f Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Wed, 9 Oct 2024 12:25:55 +0100 Subject: [PATCH 13/13] format code --- lib/atomic_web/components/image_uploader.ex | 2 +- lib/atomic_web/live/profile_live/form_component.html.heex | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index ac0c3eb9..22382a55 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -27,7 +27,7 @@ defmodule AtomicWeb.Components.ImageUploader do

or drag and drop

PNG, JPG, GIF up to <%= @size_file %>

- +
diff --git a/lib/atomic_web/live/profile_live/form_component.html.heex b/lib/atomic_web/live/profile_live/form_component.html.heex index 20101317..86ad02e6 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -48,8 +48,8 @@ <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="10KB"/> - <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="100KB"/> + <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="10KB" /> + <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads} target={@myself} class="h-100px w-100px" size_file="100KB" />
<%= submit do %>