Packages

mavu_snippets_ui

0.1.15
0.1.24 0.1.20 0.1.19 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4

MavuSnippetsUi: Rodent - Management for mavu_* projects

HexDocs

Current section

Files

Jump to
Readme
17 Versions
13 Dependencies
Dependants
Files
Activity
mavu_snippets_ui lib live file_upload_component.html.heex
Raw

lib/live/file_upload_component.html.heex 

 <section

   class="flex flex-col items-center justify-center p-2 text-center bg-gray-200 border border-gray-400 rounded min-h-32 bg"

   phx-drop-target={"#{ @uploads[@field].ref }"}>





   <%= hidden_input @f, @field %>



   <div class="font-mono text-xs whitespace-pre-wrap">



     <%= if String.length(@f.params[to_string(@field)]||"")>2 do %>

     <div class="relative p-2 mx-auto my-5 w-36 h-36">

       <img src={"#{ @f.params[to_string(@field)] }"} class={"absolute inset-0 block #{ @img_classes } border-2"}>

       <button type="button" phx-click="remove_attachment" phx-value-field={"#{ to_string(@field) }"}

         phx-target={"#{ @target }"} class="absolute -right-8"><svg class="w-6 h-6" fill="currentColor"

           viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

           <path fill-rule="evenodd"

             d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"

             clip-rule="evenodd"></path>

         </svg></button>



     </div>



     <% end %>



     <%= live_file_input @uploads[@field] %>



     <%= for entry <- []||@uploads[@field].entries  do %>

     <div class="flex ">

       <div class="w-30">

         <div class="w-full" style="max-width:300px">

           <div class="relative border-2 aspect-w-1 aspect-h-1">l

             <%= live_img_preview entry,

        class: "absolute inset-0 block #{@img_classes} border-2  "

        %> </div>

         </div>

         <div class="mt-5"><progress max="100" value={"#{ entry.progress }"} /></div>

       </div>

       <div class="flex-auto"><span phx-click="cancel_upload" phx-value-field={"#{ @field }"}

           phx-target={"#{ @target }"} phx-value-ref={"#{ entry.ref }"}><svg class="w-6 h-6" fill="currentColor"

             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

             <path fill-rule="evenodd"

               d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"

               clip-rule="evenodd"></path>

           </svg> </span></div>

     </div>

     <% end %>

   </div>

</section>