PhoenixKitWeb.Components.Core.FileUpload (phoenix_kit v2.7.0)

Copy Markdown View Source

Reusable file upload component for PhoenixKit.

Provides a simple file upload button with auto-upload functionality. Files are uploaded immediately upon selection without requiring a submit button.

Usage

<.file_upload
  upload={@uploads.media_files}
  label="Upload Media"
/>

Attributes

  • upload (required) - LiveView upload config from allow_upload/3
  • label (optional) - Button label (default: "Upload Files")
  • icon (optional) - Icon name (default: "hero-cloud-arrow-up")
  • accept_description (optional) - Text describing accepted file types
  • max_size_description (optional) - Text describing max file size

Summary

Functions

file_upload(assigns)
upload_entry_stats(assigns)

Live transfer stats for one upload entry, rendered under its progress bar.

Functions

file_upload(assigns)

Attributes

  • upload (:any) (required)
  • label (:string) - Defaults to "Upload Files".
  • icon (:string) - Defaults to "hero-cloud-arrow-up".
  • accept_description (:string) - Defaults to nil.
  • max_size_description (:string) - Defaults to nil.
  • uploaded_file_ids (:list) - List of file IDs from last upload (for external use). Defaults to nil.
  • standalone (:boolean) - wrap the drop zone in its own <form>. Set FALSE when embedding inside another form — HTML forbids nested forms and the browser closes the outer one at the inner tag, silently pushing every later field out of the host form. Defaults to true.
  • variant (:string) - Display variant - 'full' for drag-drop zone, 'button' for simple button only. Defaults to "full".

upload_entry_stats(assigns)

Live transfer stats for one upload entry, rendered under its progress bar.

The server only patches data-progress; the UploadStats JS hook computes transferred bytes, speed, and ETA in the browser ("3.2 MB / 12.4 MB · 2.8 MB/s · 4s left") and flips to a ticking "Processing on server…" once the transfer reaches 100% — the phase where the bar used to sit frozen with no hint whether the network, the file size, or the server was to blame. The hook owns the element's text; the server-rendered size is only the pre-mount fallback.

Attributes

  • entry (:any) (required) - a Phoenix.LiveView.UploadEntry.
  • class (:string) - Defaults to "block text-xs text-base-content/60 tabular-nums mt-1".