File uploader dropdown related issue

Using Streamlit
, ,
1

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

Can you format your code properly?

3

Done!

4

Where is the code related to dropdown?

5

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

6

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

image

And I can upload the file too.

image
image599×510 14.8 KB

7

Also be careful with your code.

  • multiple set_clicked()
  • indentation, spaces and tabs
8

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.

9

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

10

And we can’t modify it?

11

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

12

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

13

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

14

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

15

You can make columns 0 and 2 wider.

16

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

17

For example:

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

See the docs for more details.

18

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

19

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"
)
20

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.