Get help from the marimo community

Updated 6 months ago

Display upload image before submitting form

At a glance

The community member is trying to display an image they have selected to upload before clicking the submit button, but is encountering an issue with "_clone -ing Html". The comments suggest that the element passed to the form must be a UIElement, but hstack is not a UIElement, so it cannot be used to create a form. One community member suggests using mo.ui.run_button() instead, and provides an example implementation. Another community member notes that if they want the button and the image to be next to each other, they can use a grid view.

Useful resources

ffoat

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?

Attachment

5 comments

AAkshay

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

AAkshay

I can send you what I would do

AAkshay

This is what I would do, using mo.ui.run_button(): https://marimo.app/l/qoltlo

AAkshay

Plain Text

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()

ffoat

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.

Add a reply