File uploader dropdown related issue

Hi community,

So I was trying to create two buttons, one takes pdf and the other for OCR. So when I tried using columns, this happened, but the UI for the same doesn’t seem cool when you click one button the dropdown isn’t working for me(might not be for you as well), also it doesn’t close itself after the file gets selected.
Any fixes?

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

st.markdown(
    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>',
    unsafe_allow_html=True,
)

columns = st.columns((1,5,1,5))

with columns[0]:
    if "clicked" not in st.session_state:
            st.session_state.clicked = False

    def set_clicked():
            st.session_state.clicked = True

    st.button("📎", on_click=set_clicked)
    if st.session_state.clicked:
        allowed_types = ["pdf", "xlsx", "docx", "doc", "txt"]
        attachment_selected = st.file_uploader("Upload a file", type=allowed_types)

with columns[2]:
    if "clickedpdf" not in st.session_state:
        st.session_state.clickedpdf = False

    def set_clicked():
        st.session_state.clickedpdf = True
    with stylable_container(
        key="container_with_border",
        css_styles=r"""
            button div:before {
                font-family: 'Font Awesome 5 Free';
                content: '\f1c1';
                display: inline-block;
                padding-right: 3px;
                vertical-align: middle;
                font-weight: 900;
            }
            """,
    ):
        st.button("", on_click=set_clicked, use_container_width=True)
    if st.session_state.clickedpdf:
        allowed_types = ["pdf"]

        pdf_selected = st.file_uploader("Upload a file", type=allowed_types)

Can you format your code properly?

Done!

Where is the code related to dropdown?

Just run that code, when you click the icons, you will see that file uploader dropdown

That is not a dropdown. That is a file uploader. Regardless, this is what I get.

image

And I can upload the file too.

Also be careful with your code.

  • multiple set_clicked()
  • indentation, spaces and tabs

Yes, I know I can upload it, and as you can check the topic. But can’t we just adjust the size of the file-uploader box, like expanding the box till the mid.

Like most input widgets, file uploaders take all the horizontal space available in the container.

And we can’t modify it?

I guess you could use css to make the file uploader narrower than its container, but that is not what you want, is it?

I want to expand the file_uploader widget a little so that it could look good

Then don’t put it inside such a narrow container.

But then how the 2 buttons will work, and to align we have to use columns, no?

You can make columns 0 and 2 wider.

Can you please provide some examples or a piece of code?

For example:

columns = st.columns((1,2,1,2))

See the docs for more details.

Yeah!
I went through that earlier, but couldn’t find what I wanted!

You can also switch to a wide layout.

import streamlit as st

st.set_page_config(
    page_title="Ex-stream-ly Cool App",
    page_icon="🧊",
    layout="wide"
)