St.file_uploader() too big [design and layout]

Just a quick question - the st.file_uploader() is great, but is there / will there be any option for changing its aesthetics? In particular, for my app, I would like it to be smaller, with just a button, rather than a big drag and drop area. I might needs several data uploaders, and they are starting to take up a lot of space and look a bit clumsy.

Any ideas? thanks :smiling_face:

Note: Just to make sure you know: you can upload multiple files with one widget so be sure to utilize that if appropriate instead of making multiple file uploaders. Keyword accept_multiple_files=True

Otherwise, you can play around with CSS:

import streamlit as st
import pandas as pd

for i in range(10):
    st.file_uploader(f"File uploader {i}")

css = '''
<style>
    [data-testid='stFileUploader'] {
        width: max-content;
    }
    [data-testid='stFileUploader'] section {
        padding: 0;
        float: left;
    }
    [data-testid='stFileUploader'] section > input + div {
        display: none;
    }
    [data-testid='stFileUploader'] section + div {
        float: right;
        padding-top: 0;
    }

</style>
'''

st.markdown(css, unsafe_allow_html=True)

4 Likes

Thank you @mathcatsand ! Yes this is what I am looking for - pointers on CSS to play with!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.