Cannot a remove/attachments

Describe the bug

i should be able to browse and attach files using the button. the files should appear on the left, with the standard function to remove a given file from the list using the x

I am flexible on the style and method to do it. I can be drag/drop, browse find etc.

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

import gradio as gr

# Global variable to keep track of uploaded files
uploaded_files = []

# Function to display the names of uploaded files
def display_files(files):
    global uploaded_files
    if files:
        uploaded_files.extend(files)
    file_list = [{"name": file.name, "size": f"{file.size / 1024:.1f} KB"} for file in uploaded_files]
    return file_list

# Function to remove a specific file
def remove_file(file_to_remove):
    global uploaded_files
    uploaded_files = [f for f in uploaded_files if f.name != file_to_remove['name']]
    return [{"name": f.name, "size": f"{f.size / 1024:.1f} KB"} for f in uploaded_files]

# Gradio Interface
with gr.Blocks() as demo:
    uploaded_files_input = gr.File(file_count="multiple", label="Upload Files")
    file_display = gr.JSON()

    upload_button = gr.Button("Upload")

    # Display uploaded files
    upload_button.click(display_files, inputs=uploaded_files_input, outputs=file_display)

    # Placeholder for file removal buttons (one per file)
    file_removal_buttons = gr.Row()

    # Add removal buttons for each uploaded file
    def update_file_removal_buttons(files):
        file_removal_buttons.clear()
        for file_info in files:
            remove_btn = gr.Button(f"Remove {file_info['name']}")
            remove_btn.click(remove_file, inputs=[gr.JSON(value=file_info)], outputs=file_display, postprocess=True)
            file_removal_buttons.append(remove_btn)

    # Update the removal buttons whenever files are uploaded or removed
    upload_button.click(update_file_removal_buttons, inputs=file_display, outputs=file_removal_buttons)

# Launch the Gradio interface
demo.launch()

Screenshot

No response

Logs

I have tried over 15 different ways of doing this. Happy to share as many as I can remember.
I've looked on gradio github issues, StackOverflow etc.

System Info

Operating System: Windows 11
gradio version: 4.41.0
gradio_client version: 1.3.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.4.0
fastapi: 0.111.1
ffmpy: 0.4.0
gradio-client==1.3.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.24.5
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.1
numpy: 1.26.4
orjson: 3.10.6
packaging: 24.1
pandas: 2.2.2
pillow: 10.4.0
pydantic: 2.8.2
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.5.5
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.4
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.6.1
httpx: 0.27.0
huggingface-hub: 0.24.5
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

Blocking usage of gradio

gradio-app / gradio

Cannot a remove/attachments #9086