Drag and Drop / pdf file / streamlit

Using Streamlit
1

Summary

How is it possible to use the result of drag and drop (use the second part to display the pdf that was dragged and dropped.

Steps to reproduce

Code snippet:

    uploaded_files = st.file_uploader("Choose a CSV file", accept_multiple_files=True)
    for uploaded_file in uploaded_files:
        bytes_data = uploaded_file.read()
        st.write("filename:", uploaded_file.name)
        st.write(bytes_data)
        base64_pdf = base64.b64encode(bytes_data.read()).decode('utf-8')
        pdf_display = F'<iframe src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf"></iframe>'   
        st.markdown(pdf_display, unsafe_allow_html=True)

    #Faire une fonction avec le display
    with open(bytes_data,"rb") as f:
      base64_pdf = base64.b64encode(f.read()).decode('utf-8')
    
    pdf_display = F'<iframe src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf"></iframe>'   
    st.markdown(pdf_display, unsafe_allow_html=True)

    st.write('Statistics')
    st.image('Statistics on Icebreakers.png')

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

It should display pdf

Actual behavior:

It does not work properly - does not display

3 Likes
2

Try this.

import base64
import streamlit as st


uploaded_files = st.file_uploader(
    "Choose a PDF file",
    accept_multiple_files=True,
    type=['pdf']
)
for uploaded_file in uploaded_files:
    bytes_data = uploaded_file.read()

    st.write("filename:", uploaded_file.name)
    base64_pdf = base64.b64encode(bytes_data).decode('utf-8')
    pdf_display = F'<iframe src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf"></iframe>'
    st.markdown(pdf_display, unsafe_allow_html=True)

Sample output

image
image734Ă—601 46 KB

2 Likes
3

I have a warning with no display - this page has been blocked by Chrome (inside the PDF display)

4

Try to install chrome update. Try other pdf and try other browsers.

5

It works in Firefox, but not in Chrome, which is blocking the PDF

6

Even when changing parameters of the page https://avoidingtitanic.streamlit.app/

7

Even whe using other PDF as well

8

image
image1920Ă—980 141 KB

The test results are working well on the Chrome!
thank you!

9

Incredible, there must be a parameter to set on Chrome, but I haven’t found it yet - if anyone has any idea …

10

anyone figured out the google chrome blocking the pdf? I was not able to figure it out either

11

streamlit run Streamlit_app.py --server.enableXsrfProtection false.

this seems to work for now

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.