Upload id should be able to be a var

[Alek99]

# app/components/upload_component.py
import reflex as rx
from app.states.s3_state import S3State


def upload_component() -> rx.Component:
    return rx.el.div(
        rx.upload.root(
            rx.el.div(
                rx.icon("cloud_upload", class_name="w-10 h-10 text-gray-400 mb-2"),
                rx.el.p(
                    "Drag & drop files or click to select",
                    class_name="text-sm text-gray-600",
                ),
                class_name="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors",
            ),
            id=S3State.upload_id,
            multiple=True,
            class_name="w-full cursor-pointer",
        ),
        rx.el.div(
            rx.foreach(
                rx.selected_files(S3State.upload_id),
                lambda file: rx.el.div(
                    rx.icon("file", class_name="w-4 h-4 mr-2 text-gray-500"),
                    rx.el.span(file, class_name="text-sm text-gray-700"),
                    class_name="flex items-center p-2 bg-gray-100 rounded-md",
                ),
            ),
            class_name="mt-4 space-y-2",
        ),
        rx.cond(
            rx.selected_files(S3State.upload_id).length() > 0,
            rx.el.div(
                rx.el.button(
                    "Upload",
                    on_click=S3State.handle_upload(
                        rx.upload_files(upload_id="s3_upload")
                    ),
                    class_name="w-full px-4 py-2 mt-4 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors",
                ),
                rx.el.button(
                    "Clear",
                    on_click=rx.clear_selected_files("s3_upload"), # Changed this line
                    class_name="w-full px-4 py-2 mt-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition-colors",
                ),
                class_name="mt-4",
            ),
        ),
        class_name="p-4 bg-white border-t border-gray-200",
    )

This leads to the following frontend error

[plugin:vite:oxc] Unexpected token
/home/user/app/.web/app/routes/_index.jsx:105:192
103 |    const [addEvents, connectErrors] = useContext(EventLoopContext);
104 |  
105 |  ...(() => refs["__clear_selected_files"](Var.__init_subclass__.<locals>.StringCastedVar(_js_expr='reflex___state____s...
    |                                                                 ^
106 |  
107 |    return (
    at transformWithOxc (file:///home/user/app/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:8023:19)
    at TransformPluginContext.transform (file:///home/user/app/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:8112:26)
    at EnvironmentPluginContainer.transform (file:///home/user/app/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:30416:51)
    at loadAndTransform (file:///home/user/app/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:25382:48)
    at viteTransformMiddleware (file:///home/user/app/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:26495:20)
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

Or if we dont want this catch this before it hits a frontend error

[adhami3310]

ids can't be Vars since we store them in refs and the string name for that has to be the same.

I agree though that setting id to a var should cause an error though, I have seen our projects occasionally make that mistake.