Drag and Drop / pdf file / streamlit

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

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

2 Likes

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

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

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

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

Even whe using other PDF as well

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

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