Button that links to an external website

[jennifer-an]

Howdy,

New feature request - button that links to an external website. I feel like this is a common feature so hopefully it will benefit a vast number of people.

For some background, I need a button to download a file from AWS S3. I read through the FileDownload functionality but it looks like I have to read the file in first. With AWS S3, I'm able to share files by creating URLs that will download the file when entered into the browser. If I can create URLs and link it to a button, then ideally I can avoid reading in files.

Thanks.

[maartenbreddels]

Hi Jennifer,

an example on how to do this can be found at:

solara/solara/website/pages/apps/multipage/page1.py

Line 23 in baa3662

solara.Button(label="View source", icon_name="mdi-github-circle", attributes={"href": github_url, "target": "_blank"}, text=True, outlined=True)

Where would you expect to find this in the documentation?

Regards,

Maarten

[jennifer-an]

Hi Maarten, thank you so much! 😄 That does the trick.
I would expect to see it in the Button section: https://solara.dev/api/button

[jennifer-an]

Hi @maartenbreddels,

For some background, I need a button to download a file from AWS S3. I read through the FileDownload functionality but it looks like I have to read the file in first. With AWS S3, I'm able to share files by creating URLs that will download the file when entered into the browser. If I can create URLs and link it to a button, then ideally I can avoid reading in files.

To elaborate on my use case, I want to be able to create the URL and open (i.e. download the file) on_click of the button. When the button is clicked, the URL is created and updated on the button but only after the click and so it doesn't open anything. So I've come to realise this may be a different feature request and not as simple as a button that links to an external website. Would you have any suggestions by any chance?

Edited to add some example code:

import solara

def generate_s3_presigned_url(s3_file: str) -> str:
    """
    Returns a presigned url to a file in S3
    """
    return ""

def MyButton(s3_file):

    button_attrs, set_button_attrs = solara.use_state({})

    ## on click generate a presigned URL and download the file
    def get_and_open_presigned_url():
        set_button_attrs({"href": generate_s3_presigned_url(s3_file), "target": "_blank"})

    solara.Button(
        label=f"Download File From S3",
        on_click=get_and_open_presigned_url,
        attributes=button_attrs
     )

@solara.component
def Page():
    MyButton("s3://mybucket/myfile.csv")

[maartenbreddels]

It's an interesting problem. The quickest solution I think, would be to make your own component based on our FileDownload. You can copy our sourcecode (python and vue). And modify the vue file to treat this.bytes as the URL itself, and skip the creation of the Blob. Does this make sense to you?

Another solution would be two buttons, one to generate the URL, which would then enable a second button, but I'm not sure that makes sense in your situation.

If you need help with this, and there is funding available, you could consider sending us an email for business inquiries: https://solara.dev/docs/contact

If you manage to solve this yourself, feel free to share your solution here!

Regards,

Maarten

[awalker89]

I'll share our current solution if it helps others - it's as you suggest above with a second button. Click once to refresh the download url and a second time to trigger the download.

import solara
import time

def generate_s3_presigned_url(s3_file: str, expiry: int) -> str:
    """
    Returns a presigned url to a file in S3
    """
    return "a-presigned-download-url"

@solara.component
def DownloadButton(s3_file):

    label, set_label = solara.use_state("Refresh Link")
    btn_attrs, set_btn_attrs = solara.use_state({})
    def download():

        ## generates a presigned URL that expires after 10 seconds
        set_btn_attrs({"href": generate_s3_presigned_url(s3_file, expiry=10), "target": "_blank"})
        set_label("Download")

    ## resets button after 8 seconds so users expects to have to click twice again
    def delay_render():
        time.sleep(8)
        set_label("Refresh Link")
        set_btn_attrs({})

    result = solara.use_thread(delay_render, dependencies=[btn_attrs])

    solara.Markdown(f"btn_attrs are: {btn_attrs}")
    solara.Button(label=f"{label}", on_click=download, icon_name="mdi-cloud-download-outline", color="primary", attributes=btn_attrs)

[awalker89]

Thank you for your suggestions @maartenbreddels, we have a working solution now

downloader.vue

<template>
</template>
<script>
  export default {
    watch: {
      url: (val) => {
        console.log("url changed to", val)
        var win = window.open(val, '_self');
        win.focus();
      }
    },
  }
  </script>

And py code

@solara.component_vue("downloader.vue")
def UrlWatcherAndDownloader(url=[]):
    pass


@solara.component
def DownloadButton(s3_file):
    url, set_url = solara.use_state("")
    def download():
        set_url(generate_s3_presigned_url(s3_file))

    solara.Button(label=f"Download", on_click=download, icon_name="mdi-cloud-download-outline", color="primary")
    UrlWatcherAndDownloader(url=url)


@solara.component
def Page():
    DownloadButton("s3://my-bucket/myfile.csv")

[maartenbreddels]

Nice, that's a pretty solution!