foat•2mo 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?

4 Replies

Akshay•2mo 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•2mo 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•2mo 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()

foatOP•2mo 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.