Copy and paste from the clipboard, using buttons and callbacks

Dash Python
1

Is it possible, using callbacks from buttons, to (1) copy to the clipboard, and (2) paste from the clipboard?

  1. Regarding copy, i use dcc.clipboard and its working only when i click on the element itself. I can customize the output using a callback function, but this function must gets Input(‘main-clipboard’, ‘n_clicks’) where main-clipboard is the dcc.clipboard itself. if I try to activate a callback using a button and send the output to Output(‘main-clipboard’, ‘content’), it doesn’t work.

I read some discussion here, but I think its not working/implemented yet?: Feature/clipboard-html by Lxstr · Pull Request #2652 · plotly/dash · GitHub

  1. Regarding paste from the clipboard to some textbox using a callback from a button, I could not find anything about it. is it possible?
2

Hi @algtr

  1. You can copy to the clipboard without clicking on the dcc.Clipboard component by updating the n_clicks prop in a callback. See the example below.
  2. Currently paste from the clipboard is not supported. At the time dcc.Clipboard was added, this wasn’t widely supported by all browsers, but it may be time to revisit this!


from dash import Dash, dcc, html, Input, Output, State,  callback

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Clipboard(id="clipboard", style={"display":"none"}),
        html.Button("Copy", id="copy"),
        dcc.Textarea(value="Sample data to copy to clipboard", id="data")
    ]
)


@callback(
    Output("clipboard", "content"),
    Output("clipboard", "n_clicks"),
    Input("copy", "n_clicks"),
    State("data", "value"),
)
def custom_copy(n, data):
    return data, n



if __name__ == "__main__":
    app.run(debug=True)


``
4

Thank you, it worked :slight_smile:

1 Like