How to change text language in a widgets?

Hello! I am creating a streamlit application and using a language other than English in the interface. But some widgets like st.file_uploader have english description inside of it. Is there any way to change the text used by the widget?

1 Like

Hi @Chrome1278,

There isn’t a built-in way to do this currently, but this would make a great feature enhancement request – feel free to submit one here

2 Likes

You can circumvent not having that feature with a little css if you want:

css='''
<style>
[data-testid="stFileUploadDropzone"] div div::before {color:red; content:"This text replaces Drag and drop file here"}
[data-testid="stFileUploadDropzone"] div div span{display:none;}
[data-testid="stFileUploadDropzone"] div div::after {color:red; font-size: .8em; content:"This text replaces Limit 200MB per file"}
[data-testid="stFileUploadDropzone"] div div small{display:none;}
</style>
'''

st.markdown(css, unsafe_allow_html=True)

image

6 Likes

This works, but the “Browse files” button still remains to be changed and the ‘display:none’ method won’t work since the whole button frame will disappear. Any ideas?

1 Like

you can add
[data-testid="stFileUploadDropzone"] button{display:none;}
the button will be hidden , and it is works too 。

2 Likes

Hi, what about this part at the bottom when filetype is wrong? What is the css equivalent?
image

1 Like

Hi @Filip. Can you share your code snippet, which version of Streamlit you’re running, and what OS/browser you’re on? In my particular combination, I’m blocked from choosing the wrong file type in the OS/browser popup dialog and so can’t get to that message in Streamlit. I need to know how to reproduce it. :slight_smile:

1 Like

It will not work in version 1.32.0.
Instead of stFileUploadDropzone
you need to write stFileUploaderDropzone
the corrected version looks like this

css='''
<style>
[data-testid="stFileUploaderDropzone"] div div::before {color:red; content:"This text replaces Drag and drop file here"}
[data-testid="stFileUploaderDropzone"] div div span{display:none;}
[data-testid="stFileUploaderDropzone"] div div::after {color:red; font-size: .8em; content:"This text replaces Limit 200MB per file"}
[data-testid="stFileUploaderDropzone"] div div small{display:none;}
</style>
'''

st.markdown(css, unsafe_allow_html=True)
1 Like

Thanks to your suggestion I managed to change the button text but the other texts remain the same. I’m doing this:


    def _style_language_uploader():
        lang = 'de'
        if 'lang' in st.query_params:
            if st.query_params['lang'] == 'en':
                lang = 'en'

        languages = {
            "en": {
                "button": "Browse Files",
                "instructions": "Drag and drop files here",
                "limits": "Limit 200MB per file",
            },
            "de": {
                "button": "Dateien durchsuchen",
                "instructions": "Dateien hierher ziehen und ablegen",
                "limits": "Limit 200MB pro Datei",
            },
        }

        hide_label = (
            """
        <style>
            div[data-testid="stFileUploader"]>section[data-testid="stFileUploaderDropzone"]>button[data-testid="baseButton-secondary"] {
               color:white;
            }
            div[data-testid="stFileUploader"]>section[data-testid="stFileUploaderDropzone"]>button[data-testid="baseButton-secondary"]::after {
                content: "BUTTON_TEXT";
                color:black;
                display: block;
                position: absolute;
            }
            div[data-testid="stFileDropzoneInstructions"]>div>span {
               visibility:hidden;
            }
            div[data-testid="stFileDropzoneInstructions"]>div>span::after {
               content:"INSTRUCTIONS_TEXT";
               visibility:visible;
               display:block;
            }
             div[data-testid="stFileDropzoneInstructions"]>div>small {
               visibility:hidden;
            }
            div[data-testid="stFileDropzoneInstructions"]>div>small::before {
               content:"FILE_LIMITS";
               visibility:visible;
               display:block;
            }
        </style>
        """.replace(
                "BUTTON_TEXT", languages.get(lang).get("button")
            )
            .replace("INSTRUCTIONS_TEXT", languages.get(lang).get("instructions"))
            .replace("FILE_LIMITS", languages.get(lang).get("limits"))
        )

        st.markdown(hide_label, unsafe_allow_html=True)

Which I got from here

What should I change to change the other texts?

1 Like

Ok got it, in case someone needs it

    def _style_language_uploader():
        lang = 'de'
        if 'lang' in st.query_params:
            if st.query_params['lang'] == 'en':
                lang = 'en'

        languages = {
            "en": {
                "button": "Browse Files",
                "instructions": "Drag and drop files here",
                "limits": "Limit 200MB per file",
            },
            "de": {
                "button": "Dateien durchsuchen",
                "instructions": "Dateien hierher ziehen und ablegen",
                "limits": "Limit 200MB pro Datei",
            },
        }

        hide_label = (
            """
        <style>
            div[data-testid="stFileUploader"]>section[data-testid="stFileUploaderDropzone"]>button[data-testid="baseButton-secondary"] {
               color:white;
            }
            div[data-testid="stFileUploader"]>section[data-testid="stFileUploaderDropzone"]>button[data-testid="baseButton-secondary"]::after {
                content: "BUTTON_TEXT";
                color:black;
                display: block;
                position: absolute;
            }
            div[data-testid="stFileUploaderDropzoneInstructions"]>div>span {
               visibility:hidden;
            }
            div[data-testid="stFileUploaderDropzoneInstructions"]>div>span::after {
               content:"INSTRUCTIONS_TEXT";
               visibility:visible;
               display:block;
            }
             div[data-testid="stFileUploaderDropzoneInstructions"]>div>small {
               visibility:hidden;
            }
            div[data-testid="stFileUploaderDropzoneInstructions"]>div>small::before {
               content:"FILE_LIMITS";
               visibility:visible;
               display:block;
            }
        </style>
        """.replace(
                "BUTTON_TEXT", languages.get(lang).get("button")
            )
            .replace("INSTRUCTIONS_TEXT", languages.get(lang).get("instructions"))
            .replace("FILE_LIMITS", languages.get(lang).get("limits"))
        )

        st.markdown(hide_label, unsafe_allow_html=True)
3 Likes

It worked partially. All the text from the widget changes correctly except in the Button the “Browse Files” and “Dateien durchsuchen” appear both on top of eachother when the language is set to German. Any idea how to avoid this?

Screenshot from 2024-04-17 09-58-05

1 Like

Yes, same here, wanted to set a long german word.
I did this:
section[data-testid=“stFileUploaderDropzone”] > button {
border: solid 1px white;
background: #4D4D4D;
font-size: 0;
width: 45%;
}
section[data-testid=“stFileUploaderDropzone”] > button:after {
content: “Punkte hochladen”;
display: block;
position: absolute;
font-size: 16px;
}

:slight_smile:

1 Like