How does one hide the the file_uploader in streamlit after the image is loaded?

Question

I am using streamlit and what I am trying to do is to show 2 images in a container with 2 columns.

the code is the following:

    col1, col2 = st.columns(2)

with st.container():
    with col1:
        st.header('Top Glass Image')
        top_image = st.file_uploader('Choose Bottom Glass Image', type='jpg', key=1)
        if top_image is not None:
            # st.write(top_image)
            # st.write({'filename': top_image.name, 'file_type': top_image.type, 'filesize': top_image.size})
            st.image(load_image(top_image), width=200)
    with col2:
        st.header('Bottom Glass Image')
        bottom_image = st.file_uploader('Choose Bottom Glass Image', type='jpg', key=2)
        if bottom_image is not None:
            st.image(load_image(bottom_image), width=200)

the screen looks like the following:

Ideally, I would like to see 2 file_uploader, and once they are chosen and display, only show the image.

Any ideas on how to do that?

Answer 1

Create an empty container as a holder.
Ref: https://docs.streamlit.io/library/api-reference/layout/st.empty

with col2:
    st.header('Bottom Glass Image')

    holder = st.empty()
    bottom_image = holder.file_uploader('Choose Bottom Glass Image', type='jpg', key=2)
    # bottom_image = st.file_uploader('Choose Bottom Glass Image', type='jpg', key=2)

    if bottom_image is not None:
        st.image(load_image(bottom_image), width=200)
        holder.empty()