file input

File Input is a an input field for uploading files.

Base File Input

file_input = SingleValueFactory("file-input", "Base file input component for <input type=\"file\"> element") # Base file input component

File Input Styles

file_input_styles = enums_to_simple_factory(file_input, [GhostStyle]) # File input style variants

File Input Colors

file_input_colors = enums_to_simple_factory(file_input, [SemanticColorBrand, SemanticColorStatus], "File input color variants using daisyUI semantic colors") # File input color variants

File Input Sizes

file_input_sizes = enums_to_simple_factory(file_input, [DaisyUINamedSize], "File input size variants from extra small to extra large") # File input size variants

File Input Test Examples

---

source

test_file_input_basic_examples

 test_file_input_basic_examples ()

Test basic file_input utilities.

def test_file_input_basic_examples():
    """Test basic file_input utilities."""
    # Basic file_input
    assert str(file_input) == "file-input"
    
    # Test with modifiers
    assert str(file_input.hover) == "hover:file-input"
    assert str(file_input.md) == "md:file-input"
    assert str(file_input.dark) == "dark:file-input"

# Run the tests
test_file_input_basic_examples()

---

source

test_file_input_styles_examples

 test_file_input_styles_examples ()

Test file_input style variants.

def test_file_input_styles_examples():
    """Test file_input style variants."""
    assert str(file_input_styles.ghost) == "file-input-ghost"

# Run the tests
test_file_input_styles_examples()

---

source

test_file_input_colors_examples

 test_file_input_colors_examples ()

Test file_input color variants.

def test_file_input_colors_examples():
    """Test file_input color variants."""
    # All color variants
    assert str(file_input_colors.neutral) == "file-input-neutral"
    assert str(file_input_colors.primary) == "file-input-primary"
    assert str(file_input_colors.secondary) == "file-input-secondary"
    assert str(file_input_colors.accent) == "file-input-accent"
    assert str(file_input_colors.info) == "file-input-info"
    assert str(file_input_colors.success) == "file-input-success"
    assert str(file_input_colors.warning) == "file-input-warning"
    assert str(file_input_colors.error) == "file-input-error"
    
    # With modifiers
    assert str(file_input_colors.primary.hover) == "hover:file-input-primary"
    assert str(file_input_colors.success.focus) == "focus:file-input-success"

# Run the tests
test_file_input_colors_examples()

---

source

test_file_input_sizes_examples

 test_file_input_sizes_examples ()

Test file_input size variants.

def test_file_input_sizes_examples():
    """Test file_input size variants."""
    assert str(file_input_sizes.xs) == "file-input-xs"
    assert str(file_input_sizes.sm) == "file-input-sm"
    assert str(file_input_sizes.md) == "file-input-md"
    assert str(file_input_sizes.lg) == "file-input-lg"
    assert str(file_input_sizes.xl) == "file-input-xl"
    
    # With responsive modifiers
    assert str(file_input_sizes.xs.sm) == "sm:file-input-xs"
    assert str(file_input_sizes.lg.md) == "md:file-input-lg"

# Run the tests
test_file_input_sizes_examples()

---

source

test_file_input_basic_fasthtml_examples

 test_file_input_basic_fasthtml_examples ()

Test basic file input and ghost style from daisyUI v5 documentation.

def test_file_input_basic_fasthtml_examples():
    """Test basic file input and ghost style from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Basic file input
    basic_file_input = Input(type="file", cls=str(file_input))
    assert basic_file_input.tag == "input"
    assert basic_file_input.attrs['type'] == "file"
    assert basic_file_input.attrs['class'] == "file-input"
    
    # File input ghost
    ghost_file_input = Input(
        type="file", 
        cls=combine_classes(file_input, file_input_styles.ghost)
    )
    assert ghost_file_input.tag == "input"
    assert ghost_file_input.attrs['type'] == "file"
    assert "file-input" in ghost_file_input.attrs['class']
    assert "file-input-ghost" in ghost_file_input.attrs['class']
    
    # Return all elements in a Div
    return Div(
        basic_file_input,
        ghost_file_input
    )

# Run the tests
test_file_input_basic_fasthtml_examples()

<div>
  <input type="file" class="file-input">
  <input type="file" class="file-input file-input-ghost">
</div>

test_func = test_file_input_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_file_input_with_fieldset_fasthtml_examples

 test_file_input_with_fieldset_fasthtml_examples ()

Test file input with fieldset and label from daisyUI v5 documentation.

def test_file_input_with_fieldset_fasthtml_examples():
    """Test file input with fieldset and label from daisyUI v5 documentation."""
    from fasthtml.common import Fieldset, Legend, Input, Label, Div
    from cjm_fasthtml_daisyui.components.data_input.fieldset import fieldset, fieldset_legend, label
    
    # File input with fieldset and label
    fieldset_file_input = Fieldset(
        Legend("Pick a file", cls=str(fieldset_legend)),
        Input(type="file", cls=str(file_input)),
        Label("Max size 2MB", cls=str(label)),
        cls=str(fieldset)
    )
    
    # Verify structure
    assert fieldset_file_input.tag == "fieldset"
    assert fieldset_file_input.attrs['class'] == "fieldset"
    
    # Verify legend
    legend_element = fieldset_file_input.children[0]
    assert legend_element.tag == "legend"
    assert legend_element.attrs['class'] == "fieldset-legend"
    assert legend_element.children[0] == "Pick a file"
    
    # Verify file input
    file_input_element = fieldset_file_input.children[1]
    assert file_input_element.tag == "input"
    assert file_input_element.attrs['type'] == "file"
    assert file_input_element.attrs['class'] == "file-input"
    
    # Verify label
    label_element = fieldset_file_input.children[2]
    assert label_element.tag == "label"
    assert label_element.attrs['class'] == "label"
    assert label_element.children[0] == "Max size 2MB"
    
    return Div(fieldset_file_input)

# Run the tests
test_file_input_with_fieldset_fasthtml_examples()

<div>
<fieldset class="fieldset"><legend class="fieldset-legend">Pick a file</legend>    <input type="file" class="file-input">
<label class="label">Max size 2MB</label></fieldset></div>

test_func = test_file_input_with_fieldset_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_file_input_sizes_fasthtml_examples

 test_file_input_sizes_fasthtml_examples ()

Test file input size variations from daisyUI v5 documentation.

def test_file_input_sizes_fasthtml_examples():
    """Test file input size variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Extra small file input
    xs_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_sizes.xs)
    )
    assert xs_file_input.tag == "input"
    assert xs_file_input.attrs['type'] == "file"
    assert "file-input" in xs_file_input.attrs['class']
    assert "file-input-xs" in xs_file_input.attrs['class']
    
    # Small file input
    sm_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_sizes.sm)
    )
    assert "file-input" in sm_file_input.attrs['class']
    assert "file-input-sm" in sm_file_input.attrs['class']
    
    # Medium file input
    md_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_sizes.md)
    )
    assert "file-input" in md_file_input.attrs['class']
    assert "file-input-md" in md_file_input.attrs['class']
    
    # Large file input
    lg_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_sizes.lg)
    )
    assert "file-input" in lg_file_input.attrs['class']
    assert "file-input-lg" in lg_file_input.attrs['class']
    
    # Extra large file input
    xl_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_sizes.xl)
    )
    assert "file-input" in xl_file_input.attrs['class']
    assert "file-input-xl" in xl_file_input.attrs['class']
    
    # Return all elements in a Div
    return Div(
        xs_file_input,
        sm_file_input,
        md_file_input,
        lg_file_input,
        xl_file_input
    )

# Run the tests
test_file_input_sizes_fasthtml_examples()

<div>
  <input type="file" class="file-input file-input-xs">
  <input type="file" class="file-input file-input-sm">
  <input type="file" class="file-input file-input-md">
  <input type="file" class="file-input file-input-lg">
  <input type="file" class="file-input file-input-xl">
</div>

test_func = test_file_input_sizes_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_file_input_colors_fasthtml_examples

 test_file_input_colors_fasthtml_examples ()

Test file input color variations from daisyUI v5 documentation.

def test_file_input_colors_fasthtml_examples():
    """Test file input color variations from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Primary color file input
    primary_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.primary)
    )
    assert primary_file_input.tag == "input"
    assert primary_file_input.attrs['type'] == "file"
    assert "file-input" in primary_file_input.attrs['class']
    assert "file-input-primary" in primary_file_input.attrs['class']
    
    # Secondary color file input
    secondary_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.secondary)
    )
    assert "file-input" in secondary_file_input.attrs['class']
    assert "file-input-secondary" in secondary_file_input.attrs['class']
    
    # Accent color file input
    accent_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.accent)
    )
    assert "file-input" in accent_file_input.attrs['class']
    assert "file-input-accent" in accent_file_input.attrs['class']
    
    # Neutral color file input
    neutral_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.neutral)
    )
    assert "file-input" in neutral_file_input.attrs['class']
    assert "file-input-neutral" in neutral_file_input.attrs['class']
    
    # Info color file input
    info_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.info)
    )
    assert "file-input" in info_file_input.attrs['class']
    assert "file-input-info" in info_file_input.attrs['class']
    
    # Success color file input
    success_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.success)
    )
    assert "file-input" in success_file_input.attrs['class']
    assert "file-input-success" in success_file_input.attrs['class']
    
    # Warning color file input
    warning_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.warning)
    )
    assert "file-input" in warning_file_input.attrs['class']
    assert "file-input-warning" in warning_file_input.attrs['class']
    
    # Error color file input
    error_file_input = Input(
        type="file",
        cls=combine_classes(file_input, file_input_colors.error)
    )
    assert "file-input" in error_file_input.attrs['class']
    assert "file-input-error" in error_file_input.attrs['class']
    
    # Return all elements in a Div
    return Div(
        primary_file_input,
        secondary_file_input,
        accent_file_input,
        neutral_file_input,
        info_file_input,
        success_file_input,
        warning_file_input,
        error_file_input
    )

# Run the tests
test_file_input_colors_fasthtml_examples()

<div>
  <input type="file" class="file-input file-input-primary">
  <input type="file" class="file-input file-input-secondary">
  <input type="file" class="file-input file-input-accent">
  <input type="file" class="file-input file-input-neutral">
  <input type="file" class="file-input file-input-info">
  <input type="file" class="file-input file-input-success">
  <input type="file" class="file-input file-input-warning">
  <input type="file" class="file-input file-input-error">
</div>

test_func = test_file_input_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_file_input_states_fasthtml_examples

 test_file_input_states_fasthtml_examples ()

Test disabled file input from daisyUI v5 documentation.

def test_file_input_states_fasthtml_examples():
    """Test disabled file input from daisyUI v5 documentation."""
    from fasthtml.common import Input, Div
    
    # Disabled file input
    disabled_file_input = Input(
        type="file",
        placeholder="You can't touch this",
        cls=str(file_input),
        disabled=True
    )
    
    # Verify structure
    assert disabled_file_input.tag == "input"
    assert disabled_file_input.attrs['type'] == "file"
    assert disabled_file_input.attrs['placeholder'] == "You can't touch this"
    assert disabled_file_input.attrs['class'] == "file-input"
    assert disabled_file_input.attrs['disabled'] == True
    
    # Return element in a Div
    return Div(disabled_file_input)

# Run the tests
test_file_input_states_fasthtml_examples()

<div>
  <input type="file" placeholder="You can't touch this" disabled class="file-input">
</div>

test_func = test_file_input_states_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()