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

Drop files here or click to browse

Up to 4 files, max 10.0 MB each


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