HI @Gabriel_Gomes, this is definitely a fun scenario.
In this case there is a few things to have in mind.
First, using CSS selectors, removing text from a button will require setting the visibility to hidden which will cause the button to disappear. In this demo what I did was set the text of the button to the same color as the button to make it disappear and using an ::after selector add new text. This solution is nowhere near perfect but it should get you close to what you wanted.
import streamlit as st
languages = {
"EN": {
"button": "Browse Files",
"instructions": "Drag and drop files here",
"limits": "Limit 200MB per file",
},
"ES": {
"button": "Buscar",
"instructions": "Arrastre archivos aqui",
"limits": "Limite de 200MB por archivo",
},
}
lang = st.radio("", options=["EN", "ES"], horizontal=True)
hide_label = (
"""
<style>
div[data-testid="stFileUploader"]>section[data-testid="stFileUploadDropzone"]>button[data-testid="baseButton-secondary"] {
color:white;
}
div[data-testid="stFileUploader"]>section[data-testid="stFileUploadDropzone"]>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)
file_uploader = st.file_uploader(label="Upload a file")
Hope it helps!
–Carlos