ui.upload - how to dynamically change the accept property of the ui.upload component?

[pirx3]

Question

ui.upload component does not support the bind_props (?) so how to dynamically set a filer filter for example using a ui.selector.value?

[frankvp11]

You can just remove the prop and add a new one, like this: element.props(remove=".md", add=".txt"). Note, I didn't test that code 😅 . Then just refresh the element, using element.update. If you could give a MRE I can probably help you?

[pirx3]

Thanks for the hint. It works as expected.

from nicegui import ui
    
def handle_upload():
    pass

def update_uploader(event) -> None:
    ext: str = event.value
    ui.notify(f"Selected value: {ext}")

    accepted_ext: str = f"accept='.{ext.lower()}'"
    ui.notify(f"Selected value: {accepted_ext}")

    uploader.props(remove="accept='.csv'", add=f"{accepted_ext}")

with ui.column().classes("w-1/4 gap-4"):
    file_type_selector = (
        ui.select(
            label="Select File Type",
            options=(["CSV", "ASC", "UNB"]),
        )
        .classes("w-full")
        .props("filled")
        .tooltip("Select the file type.")
    )

    with ui.card().tight().classes("no-shadow border-[1px] w-full"):
        uploader = (
            ui.upload(
                on_upload=handle_upload,
                multiple=True,
                auto_upload=True,
                label="Upload Files",
            )
            .classes("w-full")
            .props("accept='.csv'")               
        )

    file_type_selector.on_value_change(update_uploader)

[falkoschindler]

Two minor remarks:

• Adding a prop will overwrite its value. So you can simply call .props("accept='.xyz'") - no need for the remove parameter.
• Changing props via the .props() method automatically updates the element (if any prop has changed).