rx.upload on mobile is not selecting/uploading files #4937
-
|
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:
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? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
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: |
Beta Was this translation helpful? Give feedback.
-
|
Turns out the parametre |
Beta Was this translation helpful? Give feedback.
Turns out the parametre
max_size=1000000was the issue. This was too small for photos and image files on my phone!