How do i replicate chatgpt file upload option UI

🎈 Using Streamlit
1

Summary

right now i have an application that allows user to upload using streamlit default widget , which can be a bit bulky , however i want to have a small regular button that after clicking it just triggers the fileuploader explorer

2

Hi @tarek-kerbedj :wave:

At the moment, I’m not aware of any other options (even on the component side) to implement a smaller file uploader in Streamlit.

Now, if you wanted to give it a whirl, you could build your own file uploader widget! :hugs:

For that, you’d need to create a bidirectional component. We have a pretty good guide on building components and even have templates available here.

Good luck, and let us know if you have any more questions along the way.

Best,
Charly

1 Like
3

Hey @Charly_Wargnier and thank you for your time
okay what about the ability to trigger the file explorer to open up , ie triggering the st.file_uploader as if there were an interaction but without the user clicking it

4

You’re welcome.

Could you please elaborate? I’m not sure I’m following you. :blush:

Best,
Charly

5

what I meant is, is it possible to trigger the file uploader programmatically , ie to simulate a user click on that object , so basically if a user clicks on a random button ( lets call it button1 = st.button(‘button1’) , that button triggers the widget from st.file_uploader directly to the file explorer , as if he clicked on st.file_uploader himself

6

Thank you, @tarek-kerbedj, for the additional info.

Although I’m not aware of a way to interact with the file uploader programmatically, you’re certainly able to conditionally display the file uploader widget based on another action or condition. For instance, clicking a specific button could trigger the appearance of the file uploader.

I hope this helps,
Charly

7

Does something like this is what you’re looking for?

import streamlit as st
import time
chat_box = st.chat_input("What do you want to do?")
if "uploader_visible" not in st.session_state:
    st.session_state["uploader_visible"] = False
def show_upload(state:bool):
    st.session_state["uploader_visible"] = state
    
with st.chat_message("system"):
    cols= st.columns((3,1,1))
    cols[0].write("Do you want to upload a file?")
    cols[1].button("yes", use_container_width=True, on_click=show_upload, args=[True])
    cols[2].button("no", use_container_width=True, on_click=show_upload, args=[False])

if st.session_state["uploader_visible"]:
    with st.chat_message("system"):
        file = st.file_uploader("Upload your data")
        if file:
            with st.spinner("Processing your file"):
                 time.sleep(5) #<- dummy wait for demo.

Screen Recording 2023-09-19 at 5.33.07 PM