How to Fix the file upload in the bottom with the message Input

Using Streamlit
1

I’m developing a Streamlit app and need help fixing the st.file_uploader() at the bottom of the page, alongside a chat input (st.chat_input()). While the chat input stays fixed at the bottom, the image upload option scrolls with the page.

How can I make the st.file_uploader() stay fixed at the bottom, just like the chat input? Any suggestions?

Image 1

image
image743×300 24.2 KB

Image 2
image
image866×288 9.88 KB

2 Likes
2

A hackish approach that works for all Streamlit elements is to use st.html.
You can manipulate <style> of this element to ensure that it’s anchored to the bottom of the page always.

Another plausible approach here can be - To inject this element inside the footer container. This also includes manipulating elements by injecting js script inside st.html.

I have been using this approach for manipulate placement of streamlit elements for about 2 years now and happy to share that this approach works very stably.

Do share your thoughts and results here. :slight_smile:

3

st.chat_input is a bit especial because it is placed by default in st._bottom. You can access that container the same way you’d add elements to st.sidebar, for example:

image
image1580×1222 129 KB

import streamlit as st

st.title(":cat:")

st.write("Some repeated text. " * 50)

with st._bottom:
    left_col, right_col = st.columns(2)
    with left_col:
        st.subheader("Hello chat:")
        chat = st.chat_input("Type here your question...")
    with right_col:
        uploaded_file = st.file_uploader("Upload a file")

The only downside is that the main content in the page will automatically scroll all the way down, which would be useful to display a chat history, but not much else. st._bottom is not officially supported so it’s not in the docs but it can be found in the source code.

Also, related, file inputs in st.chat_input is in development:

1 Like