@@ -2,14 +2,24 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
22 use AtomicWeb , :live_component
33
44 alias Atomic.Accounts
5+ alias AtomicWeb.Components.ImageUploader
56
67 @ extensions_whitelist ~w( .jpg .jpeg .gif .png)
78
89 @ impl true
910 def mount ( socket ) do
1011 { :ok ,
1112 socket
12- |> allow_upload ( :picture , accept: @ extensions_whitelist , max_entries: 1 ) }
13+ |> allow_upload ( :profile_picture ,
14+ accept: @ extensions_whitelist ,
15+ max_entries: 1 ,
16+ max_file_size: 10_000_000
17+ )
18+ |> allow_upload ( :image_2 ,
19+ accept: @ extensions_whitelist ,
20+ max_entries: 1 ,
21+ max_file_size: 100_000_000
22+ ) }
1323 end
1424
1525 @ impl true
@@ -29,7 +39,24 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
2939 |> Accounts . change_user ( user_params )
3040 |> Map . put ( :action , :validate )
3141
32- { :noreply , assign ( socket , :changeset , changeset ) }
42+ { :noreply ,
43+ socket
44+ |> assign ( :changeset , changeset ) }
45+ end
46+
47+ def handle_event ( "cancel-image" , % { "ref" => ref } , socket ) do
48+ uploads = [ :profile_picture , :image_2 ]
49+
50+ socket =
51+ Enum . reduce ( uploads , socket , fn key , acc ->
52+ if Enum . any? ( Map . get ( acc . assigns . uploads , key , % { entries: [ ] } ) . entries , & ( & 1 . ref == ref ) ) do
53+ cancel_upload ( acc , key , ref )
54+ else
55+ acc
56+ end
57+ end )
58+
59+ { :noreply , socket }
3360 end
3461
3562 def handle_event ( "save" , % { "user" => user_params } , socket ) do
@@ -51,38 +78,54 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
5178 "Profile updated successfully."
5279 end
5380
54- case Accounts . update_user (
55- user ,
56- Map . put ( user_params , "email" , user . email ) ,
57- & consume_image_data ( socket , & 1 )
58- ) do
59- { :ok , _user } ->
60- { :noreply ,
61- socket
62- |> put_flash ( :success , flash_text )
63- |> push_navigate ( to: ~p" /profile/#{ user_params [ "slug" ] } " ) }
64-
65- { :error , % Ecto.Changeset { } = changeset } ->
66- { :noreply , assign ( socket , :changeset , changeset ) }
81+ case Accounts . update_user ( user , Map . put ( user_params , "email" , user . email ) ) do
82+ { :ok , user } ->
83+ case consume_image_data ( socket , user ) do
84+ { :ok , _user } ->
85+ { :noreply ,
86+ socket
87+ |> put_flash ( :success , flash_text )
88+ |> push_navigate ( to: ~p" /profile/#{ user_params [ "slug" ] } " ) }
89+
90+ { :error , % Ecto.Changeset { } = changeset } ->
91+ { :noreply , assign ( socket , :changeset , changeset ) }
92+ end
6793 end
6894 end
6995
7096 defp consume_image_data ( socket , user ) do
71- consume_uploaded_entries ( socket , :image , fn % { path: path } , entry ->
72- Accounts . update_user ( user , % {
73- "image" => % Plug.Upload {
74- content_type: entry . client_type ,
75- filename: entry . client_name ,
76- path: path
77- }
78- } )
97+ consume_uploaded_entries ( socket , :profile_picture , fn % { path: path } , entry ->
98+ handle_image_upload ( user , path , entry , :profile_picture )
7999 end )
100+
101+ consume_uploaded_entries ( socket , :image_2 , fn % { path: path } , entry ->
102+ handle_image_upload ( user , path , entry , :image_2 )
103+ end )
104+
105+ { :ok , user }
106+ end
107+
108+ defp handle_image_upload ( user , path , entry , field ) do
109+ Accounts . update_user_picture ( user , % {
110+ "#{ field } => % Plug.Upload {
111+ content_type: entry . client_type ,
112+ filename: entry . client_name ,
113+ path: path
114+ }
115+ } )
80116 |> case do
81- [ { :ok , user } ] ->
117+ { :ok , user } ->
82118 { :ok , user }
83119
84- _errors ->
85- { :ok , user }
120+ { :error , changeset } ->
121+ if changeset . errors [ field ] do
122+ { :postpone , "File size exceeds maximum allowed size" }
123+ else
124+ { :error , changeset }
125+ end
126+
127+ { :errors , _changeset } ->
128+ { :error , "An error occurred while updating the user." }
86129 end
87130 end
88131end
0 commit comments