Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin #8528

sfc-gh-jkinkead · 2024-04-18T00:02:57Z

Checklist

I have searched the existing issues for similar issues.
I added a very descriptive title to this issue.
I have provided sufficient information below to help reproduce this issue.

Summary

When a Streamlit app is hosted in an iframe in a different origin than the parent frame, the download button in the dataframe toolbar silently fails with a console error.

This is arguably a bug in the native-file-system-adapter library used by this widget.

It's a little surprising that this has very different behavior from st.download_button.

Reproducible Code Example

// Run this snippet with node.
// If saved in `server.js`, run with `node server.js`.
const http = require("http");

const requestListener = function (req, res) {
    res.setHeader("Content-Type", "text/html");
    res.setHeader("Content-Security-Policy", "frame-src http://localhost:3000;");
    res.writeHead(200);
    res.end('<html><body><h1>App below:</h1><iframe sandbox="allow-popups allow-same-origin allow-scripts allow-downloads" src="http://localhost:3000" /></body></html>');
};

const host = "localhost";
const port = 3001;
const server = http.createServer(requestListener);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

# Run as a Streamlit on port 3000.
# If saved in a file `repro.py`, run with `streamlit run repro.py`.
import streamlit as st
import pandas as pd

ratings_df = pd.DataFrame(
    [
        {"command": "st.selectbox", "rating": 4, "is_widget": True},
        {"command": "st.balloons", "rating": 5, "is_widget": False},
        {"command": "st.time_input", "rating": 3, "is_widget": True},
    ]
)
st.dataframe(ratings_df, use_container_width=True)

Steps To Reproduce

Run the Streamlit app above.
Run the node server above, which iframes the Streamlit app cross-origin.
Open the node server in chrome (localhost:3001).
Hover over the dataframe table.
Click the "download" icon.

Expected Behavior

The CSV downloads in some way (in the background, in a new tab, via a file picker).

Current Behavior

Nothing happens.

The following is printed in the console:

Is this a regression?

Yes, this used to work in a previous version.

Debug info

Streamlit version: develop; 1.31.1; 1.29.0
Python version: N/A
Operating System: OS X
Browser: Chrome

Additional Information

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2024-04-18T00:03:08Z

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

SarthakNikhal · 2024-04-18T04:57:01Z

@sfc-gh-jkinkead Can I work on this issue?

sfc-gh-jkinkead · 2024-04-18T16:06:40Z

@SarthakNikhal - This is a duplicate of #8210 ; I didn't find it when searching.

@lukasmasuch has a draft patch up #8452 , so would be better to coordinate with.

lukasmasuch · 2024-06-06T13:31:43Z

Closing this issue since I believe it was fixed by #8452

Notes: `st.dataframe` works better to display DataFrames without causing an error. `st.write` works similarly well. However, it seems that the 'Download as CSV' button that appears when you hover over the tavle is no longer available. Fixed Error Messages: MessageSizeError: Data of size 228.3 MB exceeds the message size limit of 200.0 MB. This is often caused by a large chart or dataframe. Please decrease the amount of data sent to the browser, or increase the limit by setting the config option server.maxMessageSize. Click here to learn more about config options. Note that increasing the limit may lead to long loading times and large memory consumption of the client's browser and the Streamlit server. References: st.dataframe - Streamlit Docs https://docs.streamlit.io/develop/api-reference/data/st.dataframe Streamlit dataframe pagination guide — Restack https://www.restack.io/docs/streamlit-knowledge-streamlit-dataframe-pagination How to use the streamlit.dataframe function in streamlit | Snyk https://snyk.io/advisor/python/streamlit/functions/streamlit.dataframe Streamlit Tutorial - 2 for beginners | streamlit st.dataframe , st.table , st.metric , st.json - YouTube https://www.youtube.com/watch?v=F4Bzglz2sGk Make st.dataframe more awesome · Issue #1449 · streamlit/streamlit · GitHub streamlit/streamlit#1449 python - How to hide the new download button from st.dataframe - Streamlit - Stack Overflow https://stackoverflow.com/questions/77549168/how-to-hide-the-new-download-button-from-st-dataframe-streamlit How to hide the new download button from st.dataframe - 🎈 Using Streamlit - Streamlit https://discuss.streamlit.io/t/how-to-hide-the-new-download-button-from-st-dataframe/54838 Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin · Issue #8528 · streamlit/streamlit · GitHub streamlit/streamlit#8528 Problem with download button on st.dataframes - 🎈 Using Streamlit - Streamlit https://discuss.streamlit.io/t/problem-with-download-button-on-st-dataframes/59790 How to display any kind of object with Streamlit - 💬 Show the Community! - Streamlit https://discuss.streamlit.io/t/how-to-display-any-kind-of-object-with-streamlit/41847/2 Display progress and status - Streamlit Docs https://docs.streamlit.io/develop/api-reference/status Basic concepts of Streamlit - Streamlit Docs https://docs.streamlit.io/get-started/fundamentals/main-concepts Data elements - Streamlit Docs https://docs.streamlit.io/develop/api-reference/data Streamlit Download Button On_Click Guide — Restack https://www.restack.io/docs/streamlit-knowledge-streamlit-download-button-on-click Tried making a web app in python, got this error - Python Help - Discussions on Python.org https://discuss.python.org/t/tried-making-a-web-app-in-python-got-this-error/18958 File Downloads with Streamlit Download Button - YouTube https://www.youtube.com/watch?v=n37JoNMvxyE Streamlit download button - St.download_button - Projectpro https://www.projectpro.io/recipes/add-download-button-streamlit Download your Streamlit data dashboard as a PDF report — in 3 steps! | by Karan Shingde | Medium https://medium.com/@karanshingde/download-your-streamlit-data-dashboard-as-a-pdf-report-in-3-steps-97e09ed65558 Streamlit message size error fix — Restack https://www.restack.io/docs/streamlit-knowledge-streamlit-message-size-error-fix GridOptionsBuilder — streamlit-aggrid 0.2.3 documentation https://streamlit-aggrid.readthedocs.io/en/docs/GridOptionsBuilder.html https://streamlit-aggrid.readthedocs.io/en/docs/GridOptionsBuilder.html#st_aggrid.grid_options_builder.GridOptionsBuilder https://streamlit-aggrid.readthedocs.io/en/docs/GridOptionsBuilder.html#:~:text=paginationPageSize%20%E2%80%93%20Forces%20page%20to%20have%20this%20number%20of%20rows%20per%20page.%20Defaults%20to%2010. https://streamlit-aggrid.readthedocs.io/en/docs/GridOptionsBuilder.html#st_aggrid.grid_options_builder.GridOptionsBuilder:~:text=paginationPageSize%20%E2%80%93%20Forces%20page%20to%20have%20this%20number%20of%20rows%20per%20page.%20Defaults%20to%2010. JavaScript Grid: Row Pagination | AG Grid https://www.ag-grid.com/javascript-data-grid/row-pagination/#example-customising-pagination How to improve Aggrid speed? - 🎈 Using Streamlit - Streamlit https://discuss.streamlit.io/t/how-to-improve-aggrid-speed/36741 config.toml - Streamlit Docs https://docs.streamlit.io/develop/api-reference/configuration/config.toml Paginating dataframes with Streamlit | by Carlos D Serrano | Streamlit | Medium https://medium.com/streamlit/paginating-dataframes-with-streamlit-2da29b080920

sfc-gh-jkinkead added type:bug Something isn't working status:needs-triage Has not been triaged by the Streamlit team labels Apr 18, 2024

lukasmasuch added feature:st.dataframe feature:st.data_editor status:confirmed Bug has been confirmed by the Streamlit team priority:P2 and removed status:needs-triage Has not been triaged by the Streamlit team labels Apr 18, 2024

lukasmasuch self-assigned this Apr 18, 2024

raethlein mentioned this issue May 16, 2024

Add fallback method for CSV download #8452

Merged

lukasmasuch closed this as completed Jun 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin #8528

Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin #8528

sfc-gh-jkinkead commented Apr 18, 2024

github-actions bot commented Apr 18, 2024

SarthakNikhal commented Apr 18, 2024

sfc-gh-jkinkead commented Apr 18, 2024

lukasmasuch commented Jun 6, 2024

Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin #8528

Dataframe toolbar download button does not work when Streamlit app is iframed cross-origin #8528

Comments

sfc-gh-jkinkead commented Apr 18, 2024

Checklist

Summary

Reproducible Code Example

Steps To Reproduce

Expected Behavior

Current Behavior

Is this a regression?

Debug info

Additional Information

github-actions bot commented Apr 18, 2024

SarthakNikhal commented Apr 18, 2024

sfc-gh-jkinkead commented Apr 18, 2024

lukasmasuch commented Jun 6, 2024