foat
foat3mo ago

Display upload image before submitting form

I'm trying to display the image that I have selected to upload before I click submit and then it should clear. It's complaining about _clone -ing Html Is this not possible?
No description
4 Replies
Akshay
Akshay3mo ago
The element passed to form must be a UIElement (something created under the namespace mo.ui, but hstack is not a UIElement so you can't make a form out of it. You could do mo.hstack([mo.md(...), ...)].batch(...).form(). But in your case, to display an uploaded image before submitting, this isn't the way to go — the figure name and file are only sent on form submit, so you can't use their values in the form, it's circular I can send you what I would do
Akshay
Akshay3mo ago
This is what I would do, using mo.ui.run_button(): https://marimo.app/l/qoltlo
marimo | a next-generation Python notebook
A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.
Akshay
Akshay3mo ago
import marimo

__generated_with = "0.8.18-dev11"
app = marimo.App()


@app.cell
def __():
import marimo as mo
return (mo,)


@app.cell
def __(mo):
my_filename = mo.ui.text(label="filename")
my_filename
return (my_filename,)


@app.cell
def __(my_filename):
my_image = my_filename.value # replace with mo.image(...)
my_image
return (my_image,)


@app.cell
def __(mo):
submit = mo.ui.run_button(label="Submit!")
submit.right()
return (submit,)


@app.cell
def __(mo, submit):
mo.stop(not submit.value, mo.md("Click the submit button to proceed ☝️"))


# proceed to do whatever you need to do with the submitted image

mo.md("Thanks for submitting your image!")
return

if __name__ == "__main__":
app.run()
import marimo

__generated_with = "0.8.18-dev11"
app = marimo.App()


@app.cell
def __():
import marimo as mo
return (mo,)


@app.cell
def __(mo):
my_filename = mo.ui.text(label="filename")
my_filename
return (my_filename,)


@app.cell
def __(my_filename):
my_image = my_filename.value # replace with mo.image(...)
my_image
return (my_image,)


@app.cell
def __(mo):
submit = mo.ui.run_button(label="Submit!")
submit.right()
return (submit,)


@app.cell
def __(mo, submit):
mo.stop(not submit.value, mo.md("Click the submit button to proceed ☝️"))


# proceed to do whatever you need to do with the submitted image

mo.md("Thanks for submitting your image!")
return

if __name__ == "__main__":
app.run()
foat
foatOP3mo ago
Okay thanks! I guess if I want the button and the image to be next to each other I can do it in grid view.