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

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

7 Likes