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?
2 Likes
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)
7 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)
4 Likes
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?
2 Likes
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?
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;
}
2 Likes
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.