AvenUI.Components.FileInput (AvenUI v1.0.0)

Copy Markdown View Source

File upload component with drag-and-drop support and progress tracking.

Features

  • Drag and drop support
  • Multiple file uploads
  • File type validation
  • Size limits
  • Progress tracking
  • Preview support
  • Upload/remove functionality

Examples

<%!-- Basic file input --%>
<.file_input id="avatar" label="Avatar" accept="image/*" />

<%!-- Multiple files --%>
<.file_input
  id="documents"
  label="Documents"
  multiple
  accept=".pdf,.doc,.docx"
  max_files={5}
/>

<%!-- With upload handler --%>
<.file_input
  id="photos"
  label="Photos"
  multiple
  accept="image/*"
  upload="upload_photo"
  on_complete="upload_complete"
/>

LiveView setup

def handle_event("upload_photo", %{"file" => file}, socket) do
  # Process upload
  {:noreply, socket}
end

def handle_event("upload_complete", %{"file_id" => file_id}, socket) do
  # Handle completion
  {:noreply, socket}
end

Summary

Functions

file_input(assigns)

File input component with drag-and-drop support.

file_item(assigns)

File item component for displaying uploaded files.

Functions

file_input(assigns)

File input component with drag-and-drop support.

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • accept (:string) - File types to accept (e.g., 'image/*', '.pdf'). Defaults to nil.
  • multiple (:boolean) - Allow multiple file selection. Defaults to false.
  • max_files (:integer) - Maximum number of files. Defaults to 1.
  • max_size (:integer) - Maximum file size in bytes (default: 10MB). Defaults to 10000000.
  • disabled (:boolean) - Defaults to false.
  • upload (:string) - Phoenix LiveView upload event name. Defaults to nil.
  • on_complete (:string) - Event name when upload completes. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • preview - Custom preview template for uploaded files.

file_item(assigns)

File item component for displaying uploaded files.

Attributes

  • name (:string) (required)
  • size (:integer) (required)
  • type (:string) (required)
  • preview_url (:string) - Defaults to nil.
  • uploading (:boolean) - Defaults to false.
  • progress (:integer) - Defaults to 0.
  • on_remove (:string) - Defaults to nil.