From 469357bc1b08421695a542ddde51c603bed5423d Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Tue, 1 Oct 2024 16:00:10 +0100 Subject: [PATCH 01/25] 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 977f3357d..7ff53319f 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/25] 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 7ff53319f..839b37607 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 b0e083345..3dd8f6a15 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 6e0705012..8d741b29c 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/25] 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 e7356ee7c..34526b688 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/25] 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 34526b688..7ff53319f 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/25] 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 c7542ea1a..6e0705012 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/25] 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 7ff53319f..1b94ac766 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/25] 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 e41bf7a38..ac0c3eb98 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 8e4b0fa38..a5e533f88 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/25] 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 a5e533f88..20101317c 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/25] 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 ac0c3eb98..22382a558 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 20101317c..86ad02e68 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 %> From 09ab9595f96977e2105612500d353ba4fc2d451c Mon Sep 17 00:00:00 2001 From: Afonso Martins Date: Wed, 27 Nov 2024 18:55:58 +0000 Subject: [PATCH 14/25] fix: image uploader --- lib/atomic_web/components/image_uploader.ex | 16 ++++++++-------- .../live/profile_live/form_component.ex | 9 +++++++-- .../live/profile_live/form_component.html.heex | 4 ++-- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 22382a558..c94a83383 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -9,12 +9,12 @@ defmodule AtomicWeb.Components.ImageUploader do ~H"""
- <.live_file_input upload={@uploads.image} class="hidden" /> + <.live_file_input upload={@uploads} class="hidden" />
+ } phx-drop-target={@uploads.ref}>

or drag and drop

@@ -31,13 +31,13 @@ defmodule AtomicWeb.Components.ImageUploader do
- <%= for entry <- @uploads.image.entries do %> - <%= for err <- upload_errors(@uploads.image, entry) do %> + <%= for entry <- @uploads.entries do %> + <%= for err <- upload_errors(@uploads, entry) do %>

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

<% end %>
-
- <.live_img_preview entry={entry} /> +
+ <.live_img_preview entry={entry} id={"preview-#{entry.ref}"} class="rounded-lg shadow-lg" />
<%= if String.length(entry.client_name) < 30 do %> diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index 808ee4e88..67e18783e 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -10,13 +10,14 @@ defmodule AtomicWeb.ProfileLive.FormComponent do def mount(socket) do {:ok, socket - |> allow_upload(:image, accept: @extensions_whitelist, max_entries: 1)} + |> allow_upload(:image_1, accept: @extensions_whitelist, max_entries: 1, max_file_size: 10_000_000) + |> allow_upload(:image_2, accept: @extensions_whitelist, max_entries: 1, max_file_size: 100_000_000) + } end @impl true def update(%{user: user} = assigns, socket) do changeset = Accounts.change_user(user) - {:ok, socket |> assign(assigns) @@ -91,4 +92,8 @@ defmodule AtomicWeb.ProfileLive.FormComponent do {:ok, user} end + + def handle_event("cancel-image", %{"ref" => ref}, socket) do + {:noreply, cancel_upload(socket, :image_1, ref)} + 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 86ad02e68..f37b78b19 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.image_1} target={@myself} class="h-100px w-100px" size_file="10MB" /> + <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file="100MB" />
<%= submit do %> From 96791c3ea5aa0373898abae05201d4dfd68164db Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Thu, 9 Jan 2025 19:53:51 +0000 Subject: [PATCH 15/25] format code --- lib/atomic_web/live/profile_live/form_component.ex | 14 +++++++++++--- .../live/profile_live/form_component.html.heex | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index 67e18783e..b37720f1f 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -10,14 +10,22 @@ defmodule AtomicWeb.ProfileLive.FormComponent do def mount(socket) do {:ok, socket - |> allow_upload(:image_1, accept: @extensions_whitelist, max_entries: 1, max_file_size: 10_000_000) - |> allow_upload(:image_2, accept: @extensions_whitelist, max_entries: 1, max_file_size: 100_000_000) - } + |> allow_upload(:image_1, + accept: @extensions_whitelist, + max_entries: 1, + max_file_size: 10_000_000 + ) + |> allow_upload(:image_2, + accept: @extensions_whitelist, + max_entries: 1, + max_file_size: 100_000_000 + )} end @impl true def update(%{user: user} = assigns, socket) do changeset = Accounts.change_user(user) + {:ok, socket |> assign(assigns) 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 e17077810..e6e31472d 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -48,7 +48,7 @@
<%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-zinc-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads.image_1} target={@myself} class="h-100px w-100px" size_file="10MB" /> + <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads.image_1} target={@myself} class="h-100px w-100px" size_file="10MB" /> <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file="100MB" />
From 9fda7cb1f8a367727955036921aa24bf9843fe4a Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Tue, 14 Jan 2025 16:53:10 +0000 Subject: [PATCH 16/25] fix: same name and arity grouped together --- lib/atomic_web/live/profile_live/form_component.ex | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index b37720f1f..521f0682a 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -42,6 +42,10 @@ defmodule AtomicWeb.ProfileLive.FormComponent do {:noreply, assign(socket, :changeset, changeset)} end + def handle_event("cancel-image", %{"ref" => ref}, socket) do + {:noreply, cancel_upload(socket, :image_1, ref)} + end + def handle_event("save", %{"user" => user_params}, socket) do user = socket.assigns.user @@ -100,8 +104,4 @@ defmodule AtomicWeb.ProfileLive.FormComponent do {:ok, user} end - - def handle_event("cancel-image", %{"ref" => ref}, socket) do - {:noreply, cancel_upload(socket, :image_1, ref)} - end end From 1612061ed44feb1f5fc475f8753dadd4069ba1b3 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Thu, 20 Feb 2025 23:52:40 +0000 Subject: [PATCH 17/25] feat: resolve requested changes --- lib/atomic/accounts.ex | 2 +- lib/atomic/uploader.ex | 11 ++- .../live/profile_live/form_component.ex | 69 +++++++++++++------ .../profile_live/form_component.html.heex | 2 +- .../live/profile_live/show.html.heex | 8 ++- 5 files changed, 64 insertions(+), 28 deletions(-) diff --git a/lib/atomic/accounts.ex b/lib/atomic/accounts.ex index 676aa304d..ea8854fc7 100644 --- a/lib/atomic/accounts.ex +++ b/lib/atomic/accounts.ex @@ -491,7 +491,7 @@ defmodule Atomic.Accounts do {:error, %Ecto.Changeset{}} """ - def update_user(%User{} = user, attrs \\ %{}, _after_save \\ &{:ok, &1}) do + def update_user(%User{} = user, attrs \\ %{}) do user |> User.changeset(attrs) |> Repo.update() diff --git a/lib/atomic/uploader.ex b/lib/atomic/uploader.ex index b029f4429..f56b990cb 100644 --- a/lib/atomic/uploader.ex +++ b/lib/atomic/uploader.ex @@ -9,12 +9,13 @@ defmodule Atomic.Uploader do use Waffle.Definition use Waffle.Ecto.Definition - def validate(file, _) do + def validate({file, _}) do file_extension = file.file_name |> Path.extname() |> String.downcase() + size = file_size(file) case Enum.member?(extension_whitelist(), file_extension) do true -> - if file.size <= max_size() do + if size <= max_size() do :ok else {:error, "file size exceeds maximum allowed size"} @@ -30,7 +31,11 @@ defmodule Atomic.Uploader do end def max_size do - Keyword.get(unquote(opts), :max_size, 500) + Keyword.get(unquote(opts), :max_file_size, 100_000) + end + + def file_size(%Waffle.File{} = file) do + File.stat!(file.path) |> Map.get(:size) end 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 521f0682a..c05d6f854 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -10,10 +10,10 @@ defmodule AtomicWeb.ProfileLive.FormComponent do def mount(socket) do {:ok, socket - |> allow_upload(:image_1, + |> allow_upload(:profile_picture, accept: @extensions_whitelist, max_entries: 1, - max_file_size: 10_000_000 + max_file_size: 100_000_000 ) |> allow_upload(:image_2, accept: @extensions_whitelist, @@ -43,7 +43,21 @@ defmodule AtomicWeb.ProfileLive.FormComponent do end def handle_event("cancel-image", %{"ref" => ref}, socket) do - {:noreply, cancel_upload(socket, :image_1, ref)} + socket = + case Enum.find(socket.assigns.uploads.profile_picture.entries, fn entry -> + entry.ref == ref + end) do + nil -> socket + _entry -> cancel_upload(socket, :profile_picture, ref) + end + + socket = + case Enum.find(socket.assigns.uploads.image_2.entries, fn entry -> entry.ref == ref end) do + nil -> socket + _entry -> cancel_upload(socket, :image_2, ref) + end + + {:noreply, socket} end def handle_event("save", %{"user" => user_params}, socket) do @@ -65,41 +79,54 @@ defmodule AtomicWeb.ProfileLive.FormComponent do "Profile updated successfully." end - case Accounts.update_user( - user, - Map.put(user_params, "email", user.email), - &consume_image_data(socket, &1) - ) do - {:ok, _user} -> - {:noreply, - socket - |> put_flash(:success, flash_text) - |> push_navigate(to: ~p"/profile/#{user_params["slug"]}")} - - {:error, %Ecto.Changeset{} = changeset} -> - {:noreply, assign(socket, :changeset, changeset)} + case Accounts.update_user(user, Map.put(user_params, "email", user.email)) do + {:ok, user} -> + case consume_image_data(socket, user) do + {:ok, user} -> + {:noreply, + socket + |> put_flash(:success, flash_text) + |> push_navigate(to: ~p"/profile/#{user_params["slug"]}")} + + {:error, %Ecto.Changeset{} = changeset} -> + {:noreply, assign(socket, :changeset, changeset)} + end end end defp consume_image_data(socket, user) do - consume_uploaded_entries(socket, :picture_1, fn %{path: path}, entry -> - Accounts.update_user(user, %{ - "image_1" => %Plug.Upload{ + consume_uploaded_entries(socket, :profile_picture, fn %{path: path}, entry -> + Accounts.update_user_picture(user, %{ + "profile_picture" => %Plug.Upload{ content_type: entry.client_type, filename: entry.client_name, path: path } }) + |> case do + {:ok, user} -> + {:ok, user} + + {:errors, _changeset} -> + {:error, "An error occurred while updating the user."} + end end) - consume_uploaded_entries(socket, :picture_2, fn %{path: path}, entry -> - Accounts.update_user(user, %{ + consume_uploaded_entries(socket, :image_2, fn %{path: path}, entry -> + Accounts.update_user_picture(user, %{ "image_2" => %Plug.Upload{ content_type: entry.client_type, filename: entry.client_name, path: path } }) + |> case do + {:ok, user} -> + {:ok, user} + + {:errors, _changeset} -> + {:error, "An error occurred while updating the user."} + end end) {:ok, user} 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 e6e31472d..be52e5858 100644 --- a/lib/atomic_web/live/profile_live/form_component.html.heex +++ b/lib/atomic_web/live/profile_live/form_component.html.heex @@ -48,7 +48,7 @@
<%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-zinc-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads.image_1} target={@myself} class="h-100px w-100px" size_file="10MB" /> + <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads.profile_picture} target={@myself} class="h-100px w-100px" size_file="10MB" /> <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file="100MB" />
diff --git a/lib/atomic_web/live/profile_live/show.html.heex b/lib/atomic_web/live/profile_live/show.html.heex index 40ce92cb2..0ba10377b 100644 --- a/lib/atomic_web/live/profile_live/show.html.heex +++ b/lib/atomic_web/live/profile_live/show.html.heex @@ -19,7 +19,6 @@
<% end %> - <%= if @user.phone_number do %>
Phone
@@ -32,7 +31,12 @@ <% end %>
- <.avatar class="sm:w-44 sm:h-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_zinc} /> + + <%= if !@user.profile_picture do %> + <.avatar class="sm:w-44 sm:h-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_zinc} /> + <% else %> + <.avatar name={@user.name} color={:light} class="h-36 w-36 text-4xl rounded-full border-4 border-white" type={:user} src={Uploaders.ProfilePicture.url({@user.profile_picture, @user}, :original)} /> + <% end %>
From 70406091e6730e5a8759cafa988ed8d0ffc674f7 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Sat, 22 Feb 2025 17:00:50 +0000 Subject: [PATCH 18/25] feat: error in the UI but updating too --- lib/atomic/uploader.ex | 2 +- lib/atomic_web/live/profile_live/form_component.ex | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/lib/atomic/uploader.ex b/lib/atomic/uploader.ex index f56b990cb..eb6089f24 100644 --- a/lib/atomic/uploader.ex +++ b/lib/atomic/uploader.ex @@ -31,7 +31,7 @@ defmodule Atomic.Uploader do end def max_size do - Keyword.get(unquote(opts), :max_file_size, 100_000) + Keyword.get(unquote(opts), :max_file_size, 100_000_000) end def file_size(%Waffle.File{} = file) do diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index c05d6f854..459b2a089 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -13,7 +13,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do |> allow_upload(:profile_picture, accept: @extensions_whitelist, max_entries: 1, - max_file_size: 100_000_000 + max_file_size: 100_000_000_000 ) |> allow_upload(:image_2, accept: @extensions_whitelist, @@ -39,7 +39,10 @@ defmodule AtomicWeb.ProfileLive.FormComponent do |> Accounts.change_user(user_params) |> Map.put(:action, :validate) - {:noreply, assign(socket, :changeset, changeset)} + {:noreply, + socket + |> put_flash(:error, "file size exceeds maximum allowed size") + |> assign(:changeset, changeset)} end def handle_event("cancel-image", %{"ref" => ref}, socket) do @@ -107,6 +110,13 @@ defmodule AtomicWeb.ProfileLive.FormComponent do {:ok, user} -> {:ok, user} + {:error, changeset} -> + if changeset.errors[:profile_picture] do + {:postpone, "file size exceeds maximum allowed size"} + else + {:error, changeset} + end + {:errors, _changeset} -> {:error, "An error occurred while updating the user."} end From 94346a1121a74fb96f7592aa36e74d063c651c95 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Tue, 25 Feb 2025 00:44:38 +0000 Subject: [PATCH 19/25] feat: more customizavel component --- lib/atomic_web/components/image_uploader.ex | 4 +- .../live/profile_live/form_component.ex | 66 ++++++++----------- .../profile_live/form_component.html.heex | 4 +- 3 files changed, 31 insertions(+), 43 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 02e2c5539..95d231d2a 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -17,9 +17,7 @@ defmodule AtomicWeb.Components.ImageUploader do } phx-drop-target={@uploads.ref}>
- + <.icon name={@icon} class="size-8 text-zinc-400" />
<%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-zinc-700") %> - <.live_component module={ImageUploader} id="uploader-profile-picture_1" uploads={@uploads.profile_picture} target={@myself} class="h-100px w-100px" size_file="10MB" /> - <.live_component module={ImageUploader} id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file="100MB" /> + <.live_component module={ImageUploader} icon="hero-cake" id="uploader-profile-picture_1" uploads={@uploads.profile_picture} target={@myself} class="h-100px w-100px" size_file={" #{@uploads.profile_picture.max_file_size / 1_000_000} MB"} /> + <.live_component module={ImageUploader} icon="hero-cake" id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file={" #{@uploads.image_2.max_file_size / 1_000_000} MB"} />
<%= submit do %> From b894b2d47c12240de0df9526b9805b8263873344 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Thu, 27 Feb 2025 14:55:21 +0000 Subject: [PATCH 20/25] feat: requested changes --- .../live/profile_live/form_component.ex | 21 +++++++------------ .../live/profile_live/show.html.heex | 1 - 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index fb30ed32c..455aa0b81 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -45,20 +45,15 @@ defmodule AtomicWeb.ProfileLive.FormComponent do end def handle_event("cancel-image", %{"ref" => ref}, socket) do + uploads = [:profile_picture, :image_2] socket = - case Enum.find(socket.assigns.uploads.profile_picture.entries, fn entry -> - entry.ref == ref - end) do - nil -> socket - _entry -> cancel_upload(socket, :profile_picture, ref) - end - - socket = - case Enum.find(socket.assigns.uploads.image_2.entries, fn entry -> entry.ref == ref end) do - nil -> socket - _entry -> cancel_upload(socket, :image_2, ref) - end - + Enum.reduce(uploads, socket, fn key, acc -> + if Enum.any?(Map.get(acc.assigns.uploads, key, %{entries: []}).entries, &(&1.ref == ref)) do + cancel_upload(acc, key, ref) + else + acc + end + end) {:noreply, socket} end diff --git a/lib/atomic_web/live/profile_live/show.html.heex b/lib/atomic_web/live/profile_live/show.html.heex index 0ba10377b..797824230 100644 --- a/lib/atomic_web/live/profile_live/show.html.heex +++ b/lib/atomic_web/live/profile_live/show.html.heex @@ -31,7 +31,6 @@ <% end %>
- <%= if !@user.profile_picture do %> <.avatar class="sm:w-44 sm:h-44 sm:text-6xl" name={@user.name} size={:xl} color={:light_zinc} /> <% else %> From ddc65e1c0b84366ada9aa82462e24bd7c0d5bb68 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Thu, 27 Feb 2025 14:58:49 +0000 Subject: [PATCH 21/25] format code --- lib/atomic_web/live/profile_live/form_component.ex | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex index 455aa0b81..600bc487f 100644 --- a/lib/atomic_web/live/profile_live/form_component.ex +++ b/lib/atomic_web/live/profile_live/form_component.ex @@ -46,6 +46,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do def handle_event("cancel-image", %{"ref" => ref}, socket) do uploads = [:profile_picture, :image_2] + socket = Enum.reduce(uploads, socket, fn key, acc -> if Enum.any?(Map.get(acc.assigns.uploads, key, %{entries: []}).entries, &(&1.ref == ref)) do @@ -54,6 +55,7 @@ defmodule AtomicWeb.ProfileLive.FormComponent do acc end end) + {:noreply, socket} end From 4b02b154f6f7b6ccad9d76ed9d08769b44197a69 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Thu, 27 Feb 2025 16:17:19 +0000 Subject: [PATCH 22/25] feat: extensions in component --- lib/atomic_web/components/image_uploader.ex | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 95d231d2a..9f8922083 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -24,7 +24,13 @@ defmodule AtomicWeb.Components.ImageUploader do

or drag and drop

-

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

+

+ <%= @uploads.accept + |> String.split(",") + |> Enum.map(&String.trim_leading(&1, ".")) + |> Enum.map(&String.upcase/1) + |> Enum.join(", ") %> up to <%= @size_file %> +

From 176dd9235a72e875896e20113277119df32104e7 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Mon, 3 Mar 2025 19:29:17 +0000 Subject: [PATCH 23/25] feat: requested changes and add type to size of the file --- lib/atomic_web/components/image_uploader.ex | 55 +++++++++++++++---- .../profile_live/form_component.html.heex | 4 +- 2 files changed, 45 insertions(+), 14 deletions(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 9f8922083..f9b093ff6 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -9,35 +9,36 @@ defmodule AtomicWeb.Components.ImageUploader do ~H"""
- <.live_file_input upload={@uploads} class="hidden" /> + <.live_file_input upload={@upload} class="hidden" />
+ } phx-drop-target={@upload.ref}>
<.icon name={@icon} class="size-8 text-zinc-400" />

or drag and drop

- <%= @uploads.accept - |> String.split(",") - |> Enum.map(&String.trim_leading(&1, ".")) - |> Enum.map(&String.upcase/1) - |> Enum.join(", ") %> up to <%= @size_file %> + <%= extencions_string(@upload.accept) %> up to <%= assigns.size_file %> <%= @type %>

- <%= for entry <- @uploads.entries do %> - <%= for err <- upload_errors(@uploads, entry) do %> -

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

+ <%= for entry <- @upload.entries do %> + <%= for err <- upload_errors(@upload, entry) do %> + <% end %>
@@ -62,4 +63,34 @@ defmodule AtomicWeb.Components.ImageUploader do
""" end + + def update(assigns, socket) do + max_size = assigns.upload.max_file_size + type = assigns[:type] + + size_file = convert_size(max_size, type) + + {:ok, + socket + |> assign(assigns) + |> assign(:size_file, size_file)} + end + + defp convert_size(size_in_bytes, type) do + size_in_bytes_float = size_in_bytes * 1.0 + + case type do + "kB" -> Float.round(size_in_bytes_float / 1_000, 2) + "MB" -> Float.round(size_in_bytes_float / 1_000_000, 2) + "GB" -> Float.round(size_in_bytes_float / 1_000_000_000, 2) + "TB" -> Float.round(size_in_bytes_float / 1_000_000_000_000, 2) + _ -> size_in_bytes_float + end + end + + def extencions_string(extensions) do + extensions + |> String.split(",") + |> Enum.map_join(", ", fn ext -> String.trim_leading(ext, ".") |> String.upcase() end) + 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 61d2adb26..463afeabe 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-zinc-700") %> - <.live_component module={ImageUploader} icon="hero-cake" id="uploader-profile-picture_1" uploads={@uploads.profile_picture} target={@myself} class="h-100px w-100px" size_file={" #{@uploads.profile_picture.max_file_size / 1_000_000} MB"} /> - <.live_component module={ImageUploader} icon="hero-cake" id="uploader-profile-picture_2" uploads={@uploads.image_2} target={@myself} class="h-100px w-100px" size_file={" #{@uploads.image_2.max_file_size / 1_000_000} MB"} /> + <.live_component module={ImageUploader} icon="hero-camera" id="uploader-profile-picture_1" upload={@uploads.profile_picture} target={@myself} class="h-100px w-100px" type="MB" /> + <.live_component module={ImageUploader} icon="hero-photo" id="uploader-profile-picture_2" upload={@uploads.image_2} target={@myself} class="h-100px w-100px" type="GB" />
<%= submit do %> From 21620c57e898949a2350c9d880cafe0f17722eac Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Mon, 3 Mar 2025 21:24:38 +0000 Subject: [PATCH 24/25] fix: bad english --- lib/atomic_web/components/image_uploader.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index f9b093ff6..29e386f71 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -88,7 +88,7 @@ defmodule AtomicWeb.Components.ImageUploader do end end - def extencions_string(extensions) do + def extensions_to_string(extensions) do extensions |> String.split(",") |> Enum.map_join(", ", fn ext -> String.trim_leading(ext, ".") |> String.upcase() end) From 4d45f3ddf29d0003bf0847f3ba3ef0eee98214c9 Mon Sep 17 00:00:00 2001 From: AfonsoMartins26 Date: Mon, 3 Mar 2025 21:28:48 +0000 Subject: [PATCH 25/25] fix: change func name --- lib/atomic_web/components/image_uploader.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index 29e386f71..bb0af43c5 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -25,7 +25,7 @@ defmodule AtomicWeb.Components.ImageUploader do

or drag and drop

- <%= extencions_string(@upload.accept) %> up to <%= assigns.size_file %> <%= @type %> + <%= extensions_to_string(@upload.accept) %> up to <%= assigns.size_file %> <%= @type %>