download button

[azim-b]

is it possible to add a primary button that downloads something, or, takes a path (https url) for a downloadable pdf?

trying to replicate something like this (Solution Brief Download button):

https://www.h2o.ai/partner-network/find-a-partner/snowflake/

[mturoci]

You can use ui.link with button=True, but this will only give you a regular button, not the primary one. Primary download is not achievable.

[mtanco]

@mturoci you cannot use the button and download parameters together, as a note.

Edit: So that's not true, but that's what the help docs say...

[mturoci]

Oh, didn't notice, you are right. Ignore my previous suggestion.

[mtanco]

You could maybe just redirect users when they click the button like so:

from h2o_wave import main, app, Q, ui


@app('/')
async def serve(q: Q):

    if not q.app.initialized:
        (q.app.data_link,) = await q.site.upload(["./data.csv"])
        q.page["meta"] = ui.meta_card(box="")
        q.page["form"] = ui.form_card(
            box="4 1 4 4",
            items=[
                ui.button(name="download_data", label="Download Data", primary=True),
                ui.link(label="Download Data", path=q.app.data_link, download=True, button=True)
            ]
        )
        q.app.initialized = True

    elif q.args.download_data:
        q.page["meta"].script = ui.inline_script(f"""
            window.open("{q.app.data_link}", "_blank");
        """)

    await q.page.save()

[debjanipaul]

Hi @mtanco, I am trying to add a download button in my wave app which will convert a panda data frame to a CSV file and then let the users to download the csv file. I am able to achieve it in the following way where the DF gets converted to a csv file and then gets stored in a downloads folder after which the csv file is uploaded so as the user can download it.

My question is can I achieve the same functionality (with one button click) without storing the CSV in a downloads folder i.e -> the DF is converted to CSV -> gets stored in a variable -> then it gets uploaded from the variable -> then the user downloads it.

Here is my sample code:

from h2o_wave import main, app, Q, ui

@app('/')
async def serve(q: Q):

    if not q.app.initialized:
        q.page["meta"] = ui.meta_card(box="")
        q.page["form"] = ui.form_card(
            box="4 1 4 4",
            items=[
                ui.button(name="download_data", label="Convert to CSV", primary=True),
                ui.link(label="Download CSV", path=q.app.data_link, download=True, button=True)
            ]
        )
        q.app.initialized = True

    if q.args.download_data:
         df.to_csv("./downloads/download_data.csv")
        (q.app.data_link,) = await q.site.upload(["./downloads/download_data.csv"])

        q.page["meta"].script = ui.inline_script(f"""
            window.open("{q.app.data_link}", "_blank");
        """)

    await q.page.save()

[mtanco]

👋 Hi @debjanipaul! Based on the documentation it looks like q.site.upload only takes a list of file paths to be able to upload, so today there wouldn't be a way to upload the object natively. You could absolutely open a feature request, but in general handling any datatype is probably a lot harder than handling data files.

Do you have a specific use case? For example, maybe your data is very large and takes a long time to write to disk.

You could always use os to remove the file from your downloads folder as needed:

import os

from h2o_wave import app, Q, ui, main
import pandas as pd


df = pd.DataFrame([[1, 2, 3], [4, 5, 6], [7, 8, 9]], columns=["a", "b", "c"])


@app('/')
async def serve(q: Q):

    if not q.app.initialized:
        q.page["meta"] = ui.meta_card(box="")

        file_path = "./downloads/download_data.csv"
        df.to_csv(file_path, index=False)
        (q.app.data_link,) = await q.site.upload([file_path])
        os.remove(file_path)

        q.page["form"] = ui.form_card(
            box="4 1 4 4",
            items=[
                ui.link(label="Download Data", path=q.app.data_link, download=True, button=True)
            ]
        )
        q.app.initialized = True

    await q.page.save()

[azim-b]

I believe with the latest version, this maybe possible with setting path, am I correct? Shall I mark this as answered?

[debjanipaul]

Hi @azim-b, I am not able to set path to the button component.

  ui.button(name='download_csv',label='Convert to CSV',path=q.app.data_link, primary=True),

I get the following error:

TypeError: button() got an unexpected keyword argument 'path'

My h20-wave version is 0.21.1

[vopani]

path attribute for button was introduced in version 0.22.0 (Check 2nd item here: https://github.com/h2oai/wave/releases/tag/v0.22.0)

[debjanipaul]

Thanks @vopani