PineUiPhoenix.FileUploader (Pine UI v0.1.3)
View SourceProvides 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
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)
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)
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)