 <div
   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">
       <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 class="relative border-2 aspect-w-1 aspect-h-1">
         <img src="<%= @f.params[to_string(@field)] %>" class="absolute inset-0 block <%= @img_classes %> border-2">
       </div>

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