rx.upload on mobile is not selecting/uploading files

[davidmuraya]

I have a simple upload form as follows:

def upload_form():
    color = "rgb(48,164,108)"
    return rx.vstack(
        rx.upload(
            rx.vstack(
                rx.button(
                    "Select File",
                ),
                rx.text(
                    "Drag and drop the receipt files here or click to select files."
                ),
                align="center",
            ),
            id="upload",
            padding="5em",
            multiple=True,
            max_files=10,
            max_size=1000000,
            accept={
                "application/pdf": [".pdf"],
                "image/png": [".png"],
                "image/jpeg": [".jpg", ".jpeg"],
                "image/gif": [".gif"],
                "image/webp": [".webp"],
                "text/html": [".html", ".htm"],
            },
            width="100%",
            border=f"1px dotted {color}",
        ),
        rx.vstack(
            rx.cond(
                rx.selected_files("upload").length() > 0,
                rx.card(
                    rx.vstack(
                        rx.text(
                            f"{rx.selected_files('upload').length()} files selected:"
                        ),
                        rx.foreach(rx.selected_files("upload"), rx.text),
                    ),
                    width="100%",
                ),
                rx.text("No files selected", color="gray", size="2"),
            ),
            id="upload-files",
            width="100%",
        ),
        rx.cond(
            UploadState.processing,
            rx.card(
                rx.vstack(
                    rx.hstack(
                        rx.spinner(size="2"),
                        rx.text(UploadState.task_description),
                        spacing="2",
                    ),
                    rx.progress(value=UploadState.progress, max=100),
                    spacing="2",
                ),
                size="3",
                width="100%",
            ),
            rx.spacer(),
        ),
        rx.hstack(
            rx.cond(
                UploadState.processing,
                rx.button(
                    "Cancel",
                    on_click=UploadState.cancel_upload,
                ),
                rx.button(
                    "Upload",
                    on_click=UploadState.handle_upload(
                        rx.upload_files(
                            upload_id="upload",
                        ),
                    ),
                    disabled=rx.selected_files("upload").length() == 0,
                ),
            ),
            rx.alert_dialog.root(
                rx.alert_dialog.trigger(
                    rx.button(
                        "Clear", disabled=rx.selected_files("upload").length() == 0
                    ),
                ),
                rx.alert_dialog.content(
                    rx.alert_dialog.title("Clear selected files?"),
                    rx.alert_dialog.description(
                        "Are you sure?",
                    ),
                    rx.flex(
                        rx.alert_dialog.cancel(
                            rx.button("Cancel"),
                        ),
                        rx.alert_dialog.action(
                            rx.button("Yes, clear"),
                            on_click=UploadState.reset_upload,
                            color_scheme="red",
                            variant="solid",
                        ),
                        spacing="3",
                        margin_top="16px",
                        justify="end",
                    ),
                    style={"max_width": 450},
                ),
            ),
            spacing="2",
        ),
        align="center",
    )

On a pc, I can select files and upload. That works ok.

However, on mobile, I can't:

1. Take a photo,
2. Select files. When I click select file > Photos and Videos > Photos > Tick the files, and click add on my mobile, the selected files value is 0.

I have ensured the selected files are in the formats accepted and they don't exceed the max size limit. 

Has anyone had this issue?

[davidmuraya]

In place of the Upload button, I have tried to use on_drop:

 # rest of the upload component code
 on_drop=UploadState.handle_upload(rx.upload_files(upload_id="upload")),  

Works OK on a desktop PC.

On mobile, I get the following error after selecting files/images:

[Reflex Backend Exception]
Traceback (most recent call last):
File "/app/.venv/lib/python3.13/site-packages/reflex/state.py", line 1809, in
_process_event
events = fn(**payload)
TypeError: UploadState.handle_upload() missing 1 required positional argument:
'files'

[davidmuraya]

Turns out the parametre max_size=1000000was the issue. This was too small for photos and image files on my phone!