PineUiPhoenix.FileUploader (Pine UI v0.1.3)

View Source

Provides file upload components with drag-and-drop functionality.

The FileUploader module offers components for file uploads with support for drag-and-drop, file previews, and multiple file selection.

Summary

Functions

Renders a basic file uploader component.

Renders an image uploader with cropping capability.

Renders a multi-file uploader component with progress tracking.

Functions

basic(assigns)

Renders a basic file uploader component.

This component creates a file upload area with drag-and-drop functionality.

Examples

<.basic
  id="document-upload"
  name="document"
  label="Upload Document"
  accept=".pdf,.doc,.docx"
/>

<.basic
  id="profile-image"
  name="profile_image"
  label="Upload Profile Image"
  accept="image/*"
  max_file_size={5 * 1024 * 1024}
  show_preview={true}
/>

Options

  • :id - The ID for the file input (required)
  • :name - The name attribute for the file input (optional, defaults to ID)
  • :label - Label text for the uploader (optional)
  • :accept - Comma-separated list of allowed file types (optional)
  • :max_file_size - Maximum file size in bytes (optional)
  • :multiple - Whether to allow multiple file selection (optional, defaults to false)
  • :show_preview - Whether to show file previews (optional, defaults to false for multiple files, true for single files)
  • :class - Additional CSS classes for the uploader container (optional)
  • :on_change - JavaScript function to call when files change (optional)

image(assigns)

Renders an image uploader with cropping capability.

This component creates an uploader specifically for images with built-in preview and optional cropping functionality.

Examples

<.image
  id="avatar-upload"
  name="avatar"
  label="Upload Avatar"
/>

<.image
  id="cover-photo"
  name="cover_photo"
  label="Cover Photo"
  aspect_ratio={16/9}
  allow_cropping={true}
  preview_height="10rem"
/>

Options

  • :id - The ID for the file input (required)
  • :name - The name attribute for the file input (optional, defaults to ID)
  • :label - Label text for the uploader (optional)
  • :accept - Comma-separated list of allowed image types (optional, defaults to "image/*")
  • :max_file_size - Maximum file size in bytes (optional)
  • :aspect_ratio - Fixed aspect ratio for the image (optional)
  • :allow_cropping - Whether to enable image cropping (optional, defaults to false)
  • :preview_height - Height of the preview area (optional, defaults to "12rem")
  • :class - Additional CSS classes for the uploader container (optional)
  • :on_change - JavaScript function to call when files change (optional)

multi(assigns)

Renders a multi-file uploader component with progress tracking.

This component creates an uploader that handles multiple files with individual progress tracking for each file.

Examples

<.multi
  id="gallery-upload"
  name="gallery"
  label="Upload Images"
  accept="image/*"
  max_files={5}
/>

Options

  • :id - The ID for the file input (required)
  • :name - The name attribute for the file input (optional, defaults to ID)
  • :label - Label text for the uploader (optional)
  • :accept - Comma-separated list of allowed file types (optional)
  • :max_file_size - Maximum file size in bytes (optional)
  • :max_files - Maximum number of files that can be selected (optional)
  • :show_preview - Whether to show file previews (optional, defaults to true)
  • :class - Additional CSS classes for the uploader container (optional)
  • :on_change - JavaScript function to call when files change (optional)