FileInput - filenames not displayed

[thuydotm]

Chosen files were uploaded successfully but their names didn't appear in the FileInput widget so user may get confused whether the upload has been done or not.

import panel as pn
from panel_material_ui import *

pn.extension(template='material', defer_load=True)

file_input = FileInput(accept='.txt,.csv')  # Accept only .txt and .csv files

# Callback function to handle the uploaded file
def handle_file(event):
    if file_input.value:
        file_content = ",".join(file_input.filename)
        # Display content in a TextArea for visualization
        textarea.value = file_content

# Link the callback to the value change event
file_input.param.watch(handle_file, 'value')

# TextArea to display file content
textarea = TextAreaInput(value='', height=300, width=500, placeholder='Uploaded files will appear here.')

pn.Column(
    pn.pane.Markdown("### File Upload Example"),
    file_input,
    textarea,
).servable()

Screen.Recording.2025-01-03.at.23.08.28.mov