Skip to content

Commit

Permalink
feat: restore files because nothing works
Browse files Browse the repository at this point in the history
  • Loading branch information
@AfonsoMartins26
AfonsoMartins26 committed Oct 6, 2024
1 parent be2063e commit eb08129
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 44 deletions.
34 changes: 25 additions & 9 deletions lib/atomic_web/components/image_uploader.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,40 @@ 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.
"""
use AtomicWeb, :live_component

def render(assigns) do
# Generate a unique reference using the passed id
unique_ref = assigns.id <> "_upload"

~H"""
<div>
<div class="shrink-0 1.5xl:shrink-0">
<.live_file_input upload={@uploads[@upload_name]} class="hidden" id={unique_ref <> "_file"} />
<.live_file_input upload={@uploads.image} class="hidden" />
<div class={
"#{if length(@uploads.image.entries) != 0 do
"hidden"
end} #{@class} border-2 border-gray-300 border-dashed rounded-md"
} phx-drop-target={@uploads.image.ref}>
<div class="flex h-full items-center justify-center px-6">
<div class="flex flex-col items-center justify-center space-y-1">
<svg class="size-12 mx-auto text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex flex-col items-center text-sm text-gray-600">
<label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-orange-500 hover:text-red-800">
<a onclick={"document.getElementById('#{@uploads.image.ref}').click()"}>Upload a file</a>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<section>
<%= 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 %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="upload-entry">
Expand All @@ -32,9 +48,9 @@ defmodule AtomicWeb.Components.ImageUploader do
<div class="flex">
<figcaption>
<%= 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 %>
</figcaption>
<button type="button" phx-click="cancel-image" phx-target={@target} phx-value-ref={entry.ref} aria-label="cancel" class="pl-4">
Expand Down
41 changes: 6 additions & 35 deletions lib/atomic_web/live/profile_live/form_component.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,10 @@
<div class="flex flex-col text-sm w-full sm:w-96 text-red-600"><%= error_tag(f, :phone_number) %></div>
</div>
</div>
<.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_1" uploads={@uploads} upload_name={:picture_1} target={@myself} />
<!-- se tirar o <a> o codigo funciona mas não faz upload -->
<a onclick={"document.getElementById('#{@uploads[@upload_name].ref}').click()"}>
<.live_file_input upload={@uploads.picture} class="hidden" />
<a onclick={"document.getElementById('#{@uploads.picture.ref}').click()"}>
<div class={
"#{if length(@uploads.picture_1.entries) != 0 do
"#{if length(@uploads.picture.entries) != 0 do
"hidden"
end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
}>
Expand All @@ -60,36 +59,8 @@
</div>
</div>
<section>
<%= for entry <- @uploads.picture_1.entries do %>
<%= for err <- upload_errors(@uploads.picture_1, entry) do %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
<div class="flex absolute z-10 justify-center items-center w-full h-full rounded-full">
<.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" />
</div>
<figure class="flex justify-center items-center w-full h-full rounded-full group-hover:opacity-80">
<.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" />
</figure>
</article>
<% end %>
</section>
</a>
<.live_component module={AtomicWeb.Components.ImageUploader} id="uploader_2" uploads={@uploads} upload_name={:picture_2} target={@myself} />
<!-- se tirar o <a> o codigo funciona mas não faz upload -->
<a onclick={"document.getElementById('#{@uploads[@upload_name].ref}').click()"}>
<div class={
"#{if length(@uploads.picture_2.entries) != 0 do
"hidden"
end} relative w-40 h-40 ring-2 ring-zinc-300 rounded-full cursor-pointer bg-zinc-400 sm:w-48 group sm:h-48 hover:bg-tertiary"
}>
<div class="flex absolute justify-center items-center w-full h-full">
<.icon name="hero-camera" class="mx-auto w-12 h-12 sm:w-20 sm:h-20 text-white group-hover:text-opacity-70" />
</div>
</div>
<section>
<%= 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 %>
<p class="alert alert-danger"><%= Phoenix.Naming.humanize(err) %></p>
<% end %>
<article class="flex relative items-center w-40 h-40 sm:w-48 sm:h-48 bg-white rounded-full cursor-pointer upload-entry group">
Expand All @@ -112,4 +83,4 @@
<% end %>
</div>
</.form>
</div>
</div>

0 comments on commit eb08129

Please sign in to comment.