Streamlit file uploader- uses paginator to display the files using arrows but how to have it as a scroll bar

[Ramya]

Streamlit paginator uses arrows to show the browsed/uploaded files in pages, but how to make the files get displayed using scroll bar?

[mathcatsand]

As you note, the file_uploader widget does indeed use a paginator to display more than three files. There isn’t a built-in way to show it otherwise. Aside from building a completely different widget from scratch as a custom component, I think you are stuck with it as is.

The only thing I could think might work is to hide the portion of the widget showing the files via a CSS hack so you can in turn manually list them out however you desire. Then you would need to externally provide an option to clear the widget. It would be easy enough to change the widget key and cause a new, empty widget to be created to effectively clear it manually. With a little work you could create logic to allow clearing of individual files, but it would necessarily be a bit hacky…

I see there is a feature request on GitHub. Since it is timed around the same date as this post was created, I’m guessing you wrote it. I will link it here for posterity in case anyone else comes across this in the forum and would like to upvote it.

File uploader - feature missing

[mathcatsand]

Here is a framework for changing the display of the uploaded files. I’ve stuffed all the uploaded files into an expander but you can use more CSS hacks to set a max height for the the expander or use a container instead and set a max height with scrolling enabled.

import streamlit as st
import pandas as pd

if 'loader_key' not in st.session_state:
    st.session_state.loader_key = 0
    st.session_state.uploaded_files = []

def loader_clear():
    st.session_state.loader_key += 1

def loader_unload():
    st.session_state.uploaded_files.extend(st.session_state[st.session_state.loader_key])
    loader_clear()

def file_remove(index):
    st.session_state.uploaded_files.pop(index)

st.file_uploader('Upload Files Here', accept_multiple_files=True, key=st.session_state.loader_key, on_change=loader_unload)

output = st.expander('Uploaded Files')
for index, file in enumerate(st.session_state.uploaded_files):
    loaded = output.columns([3,5,5])
    loaded[0].button('Remove', key=f'file{index}', on_click=file_remove, args=[index])
    loaded[1].write(file.name)
    loaded[2].write(f'{file.size} Bytes')

css = '''
<style>
    [data-testid="stFileUploadDropzone] + div {
        display: none;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)