defmodule PyrauiWeb.DocsLive.FileUploadDocs do use PyrauiWeb, :html def render(assigns) do ~H"""

File Upload

File upload component with drag & drop support and live progress tracking. Uses Phoenix LiveView's built-in file upload functionality.

Basic File Upload

Note: This component requires LiveView upload configuration in your LiveView module.

File upload component preview

Configure uploads in your LiveView to see the full component 


              <.file_upload uploads={@uploads.avatar} label="Upload Avatar" />

Multiple Files


              <.file_upload uploads={@uploads.documents} accept=".pdf,.doc" max_entries={5} />

LiveView Setup


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

              def handle_event("validate", _params, socket) do
                {:noreply, socket}
              end

              def handle_event("cancel-upload", %{"ref" => ref}, socket) do
                {:noreply, cancel_upload(socket, :avatar, ref)}
              end

Props

Prop Type Default Description
uploads map - Uploads map from socket (e.g., @uploads.avatar)
accept string "*/*" Accepted file types (e.g., "image/*", ".pdf,.doc")
max_entries integer 1 Maximum number of files
max_file_size integer 10485760 Maximum file size in bytes (default: 10MB)
drag_label string "Drag and drop files here..." Custom drag & drop label text
""" end end