Can we edit the name of the button "Browse files" in st.file_uploader. Currently able to remove the Drag and drop text and able to get filename above the Browse files button once uploaded

Using Streamlit
1 
st.file_uploader("uploader")
css = '''
                    <style>
                        [data-testid='stFileUploader'] {
                            width: max-content;
                            display:flex;
                            flex-direction:column-reverse;
                            align-items:flex-start;
                        }
                        [data-testid='stFileUploaderFileName'] {
                            font-weight: normal; 
                        }
                        [data-testid='stFileUploaderDeleteBtn'] {
                            margin-top: 4px;
                            
                        }
        </style>
2

Hey @sum, this should work:

st.html(
"""
<style>

[data-testid='stFileUploaderDropzoneInstructions'] > div > span {
  display: none;
}

[data-testid='stFileUploaderDropzoneInstructions'] > div::before {
  content: 'Your new text here';
}
</style>
"""
)

But please note that we don’t guarantee that the DOM structure stays stable across versions. So this might break in the future!

3

Thanks @raethlein. I tried with this below css, but Browse Files not getting removed. The new text gets appended with Browse files. Using "display: none "hides the whole button .

css='''<style>
         

                        [data-testid='baseButton-secondary']::before {
                           content: 'New Text';
                        }
                    </style>
                    '''

newte

4

Ah, for the button this seems to work:

st.html(
"""
<style>
[data-testid='stBaseButton-secondary'] {
  text-indent: -9999px;
  line-height: 0;
}

[data-testid='stBaseButton-secondary']::after {
  line-height: initial;
  content: "Foo";
  text-indent: 0;
}
</style>
"""
)

Inspired from here: Replace text in an element with CSS · GitHub

1 Like
5

Thanks @raethlein this worked!

1 Like
6

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