File Upload

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :documents,
     accept: ~w(.pdf .png .zip),
     max_entries: 3,
     max_file_size: 10_000_000
   )}
end

<form phx-change="validate-documents" phx-submit="save-documents" class="w-full max-w-lg">
  <.file_upload
    upload={@uploads.documents}
    label="Upload documents"
    description="PDF, PNG, or ZIP up to 10MB"
  />
</form>

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :photos,
     accept: ~w(.jpg .jpeg .png .webp),
     max_entries: 5,
     max_file_size: 5_000_000
   )}
end

<form phx-change="validate-photos" phx-submit="save-photos" class="w-full max-w-lg">
  <.file_upload
    upload={@uploads.photos}
    label="Upload photos"
    description="JPG, PNG, or WebP up to 5MB"
    thumbnail
  />
</form>

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :avatar,
     accept: ~w(.jpg .jpeg .png),
     max_entries: 1,
     max_file_size: 2_000_000
   )}
end

<form phx-change="validate-avatar" phx-submit="save-avatar" class="w-full max-w-sm">
  <.file_upload
    upload={@uploads.avatar}
    label="Upload profile photo"
    description="JPG or PNG, max 2MB"
    thumbnail
  />
</form>

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :attachments,
     accept: ~w(.pdf .png .zip),
     max_entries: 3,
     max_file_size: 10_000_000
   )}
end

<form phx-change="validate-attachments" phx-submit="save-attachments" class="w-full max-w-lg">
  <.file_upload upload={@uploads.attachments}>
    <:drop_content>
      <span class="text-4xl">📁</span>
      <span class="text-sm font-medium text-foreground">Drop your files here</span>
      <span class="text-xs text-muted-foreground">or click to browse</span>
    </:drop_content>
  </.file_upload>
</form>