 <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>
