Rendering rx.upload inside rx.foreach

[elliottsj]

Is this possible? I'm running into a number of errors, the simplest of which is shown here: https://github.com/elliottsj/reflex-upload-bug

def index() -> rx.Component:
    fields = [
        "field1"
    ]
    return rx.foreach(
        fields,
        lambda field: rx.upload(
            rx.text(
                "Drag and drop files here or click to select files"
            ),
            id="upload",
        )
    )

result:

[adhami3310]

this should be fixed in main

[elliottsj]

Thanks, looking forward to trying the new release once it's out.

In the meantime, I was able to work around the jsx error using an rx.fragment():

import reflex as rx

class State(rx.State):
    fields: rx.Field[list[str]] = rx.field(["field1", "field2"])
    
    @rx.event
    async def handle_upload(self, files: list[rx.UploadFile]) -> None:
        for file in files:
            print("file", file)

def index() -> rx.Component:
    return rx.foreach(
        State.fields,
        lambda field: rx.fragment(
            rx.text(field),
            rx.upload(
                rx.text(
                    "Drag and drop files here or click to select files"
                ),
                multiple=False,
                max_files=1,
                id="upload",
                on_drop=State.handle_upload(rx.upload_files(upload_id="upload")),
            )
        )
    )


app = rx.App()
app.add_page(index)

However, there's a server error when I change to id=field and upload_id=field:

                id=field,
                on_drop=State.handle_upload(rx.upload_files(upload_id=field)),

->

...
  File "/Users/spencer/Dev/elliottsj/reflex-upload-bug/.venv/lib/python3.11/site-packages/reflex/vars/base.py", line 1375, in __bool__
    raise VarTypeError(
reflex.utils.exceptions.VarTypeError: Cannot convert Var 'field' to bool for use with `if`, `and`, `or`, and `not`. Instead use `rx.cond` and bitwise operators `&` (and), `|` (or), `~` (invert).

I can work around this by casting using str:

                id=str(field),
                on_drop=State.handle_upload(rx.upload_files(upload_id=str(field))),

But I'd like to be able to distinguish between "field1" and "field2" in the handle_upload function. The files list doesn't contain the upload id.

I have tried adding an arg to handle_upload:

    @rx.event
    async def handle_upload(self, files: list[rx.UploadFile], field: str) -> None:
        print("field", field)
        for file in files:
            print("file", file)

                on_drop=State.handle_upload(rx.upload_files(upload_id=str(field)), field),

However, this results in a runtime error when uploading a file:

[Reflex Backend Exception]
 Traceback (most recent call last):
  File "/Users/spencer/Dev/elliottsj/reflex-upload-bug/.venv/lib/python3.11/site-packages/reflex/state.py", line 1815, in _process_event
    events = await fn(**payload)
                   ^^^^^^^^^^^^^
TypeError: State.handle_upload() missing 1 required positional argument: 'field'

Any suggestions?

[iBuitron]

i have the same bug, cant use a variable inside a rx.upload

[Garagoth]

Version 0.9.8.
All use of vars in rx.upload for upload_id or on_drop parameters inside rx.foreach fails with message that foreach iterator variable is undefined.

[masenf]

Try to decorate your item component as @rx.memo and pass the item/index as props.

The ClientStateVar refactor PR should address this more internally.