Is there a way to paste from clipboard into file_uploader?

Using Streamlit
1

Hello,

I am working on an app that uses OCR on uploaded images. Most of the images will be screenshots taken by the user. Is there anyway the user could simply create the screenshot then ctrl + v it into the file_uploader? This would prevent the extra step of opening paint, saving/cropping the file, and then uploading.

2

Hey @pomkos,

Theres is no inbuilt Streamlit functionality for this. For now they will need to save the file locally.

Although, if they use the select screen shot they wont need to do the cropping step. You can let them know about how to do this in the instructions on how to use your app!

On a mac is command-shift-4 and on windows I believe its windows-shift-s

Cheers,
Marisa

3

Hmmm, thanks Marisa!

I’ll see if there is a react or js snippet I could maybe inject to get the clipboard functionality.

1 Like
4

hey @pomkos!

Great! post here if you find a snippet that works for you! :nerd_face:

Sorry I couldn’t be of more help!

Happy Streamlit-ing!
Marisa

5

Hey @pomkos, As @Marisa_Smith said there’s no inbuilt way to do it in streamlit. But there sure is a way if you can use a custom component. streamlit-bokeh-events can do this for you.

This piece of code,

import streamlit as st
from bokeh.models.widgets import Button
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events
from io import StringIO
import pandas as pd


copy_button = Button(label="Get Clipboard Data")
copy_button.js_on_event("button_click", CustomJS(code="""
    navigator.clipboard.readText().then(text => document.dispatchEvent(new CustomEvent("GET_TEXT", {detail: text})))
    """))
result = streamlit_bokeh_events(
    copy_button,
    events="GET_TEXT",
    key="get_text",
    refresh_on_update=False,
    override_height=75,
    debounce_time=0)

if result:
    if "GET_TEXT" in result:
        df = pd.read_csv(StringIO(result.get("GET_TEXT")))
        st.table(df)

Will give you this,

clipboard
clipboard1276Ă—689 472 KB

I have taken an example of converting clipboard data to dataframe but you can do whatever you want with it. result.get("GET_TEXT") will give you the text.

Hope it helps ! :slight_smile:

3 Likes
6

Now that’s an awesome code snippet! Unfortunately I cannot reproduce it though. The button was created, however I don’t think it actually does anything (result variable is always None). Other than bokeh and the steamlit_bokeh_events is anything need to be installed on my end? I tried running both remotely and locally but no luck yet.

Edit, a slight modification and it works great! Unfortunately it looks like Safari and Firefox don’t allow this type of functionality, Chrome works fine though. Well, it works great locally, but for some reason the same exact code breaks when I deploy it.

import streamlit as st
from bokeh.models.widgets import Button
from bokeh.events import ButtonClick
from bokeh.models import CustomJS
from streamlit_bokeh_events import streamlit_bokeh_events
from io import StringIO
import pandas as pd


copy_button = Button(label="Get Clipboard Data")
copy_button.js_on_event(ButtonClick, CustomJS(code="""
    navigator.clipboard.readText().then(text => document.dispatchEvent(new CustomEvent("GET_TEXT", {detail: text})))
    """))
result = streamlit_bokeh_events(
    copy_button,
    events="GET_TEXT",
    key="get_text",
    refresh_on_update=False,
    override_height=75,
    debounce_time=0)

st.write(result.get("GET_TEXT"))

if result:
    if "GET_TEXT" in result:
        df = pd.read_csv(StringIO(result.get("GET_TEXT")))
        st.table(df)
7

Hey @pomkos!
It will work for Firefox and Safari as well,.you just need to modify the navigator.clipboard part a little. I didn’t have anything else than chrome installed so couldn’t do this. This solution will only work for streamlit >= 0.73.0
Before it we had sandboxed components. Please verify that you’re using streamlit >= 0.73

I will try to find the cross platform code for navigator.clipboard part.

Hope.it helps!

1 Like
8

Hey ash2shukla,

Good stuff it works!
Originally I used pd.read_clipboard() but it does not work on a Heroku app.
But I cannot position it neatly with me streamlit column layouts…
I wish basic clipboard i/o in browser could be supported by the official streamlit framework.

1 Like