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)
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?
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. 
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)
2 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?
1 Like