How to Customize "Drag and Drop" Text in Streamlit File Uploader?

[Gabriel_Gomes]

Hi Streamlit Experts,

I’m enhancing the user interface of my Streamlit app and I’ve come to a standstill with the file uploader widget. I wish to personalize the text prompts “Drag and drop file here” and “Browse files” to align with the app’s language style. I’ve managed to change the label via st.file_uploader("Your custom text here:", type=['xlsx']), but not these specific strings.

Required Information:

Local APP
Streamlit and python newest versions

Is it possible to customize these parts of the uploader within Streamlit? If it is, I’d greatly appreciate any guidance or code examples.
Thank you for your time and help!

[willhuang]

Hi @Gabriel_Gomes , can you check out this forum post:

Is there any chance that I can remove the "Drag and drop file here" of file_uploader

I’m a Chinese user and I want to change the text to Chinese, but I know little about CSS.

I think it might help

[CarlosSerrano]

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