Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Doesn't handle serving of PDF file properly to load pdf in <object> tag #1245

Open
Atreyagaurav opened this issue Sep 30, 2023 · 1 comment
Open

Doesn't handle serving of PDF file properly to load pdf in <object> tag #1245

Atreyagaurav opened this issue Sep 30, 2023 · 1 comment

Comments

@Atreyagaurav
Copy link
Contributor

I don't know how to word it properly. But the problem is: I was making an interactive web app to browse the files locally. Since I normally use miniserve to serve things I tried it and didn't work. I spent too much time debugging it without realising that it was supposed to work but miniserve was doing something weird.

So basically I have a index html, that has some features that let you browse plots (PNG or PDF). Minimal reproducible example being:

Suppose I have the following files, you can put whatever content in PNG and PDF as long as it's valid.

.
├── img1.png
├── index.html
├── pdf1.pdf
└── pdf2.pdf

For the HTML file, to make things minimal, forgetting all nice formats I have something like this:

<!doctype html>
<html>
    <head>
	<title>Exploratory Plots</title>
	<meta charset="utf-8" />
    </head>
    <body>
	<div>
	    <p>
		<select name="plot" id="plot" onchange="plotChanged()">
                <option value="pdf1.pdf">PDF 1</option>
                <option value="pdf2.pdf">PDF 2</option>
                <option value="img1.png">PNG 1</option>
		</select>
	    </p>
	</div>

	<div>
	    <object id="opened-file" data=""  width="80%" height="700px" type="application/pdf">
		<p> Not supported; or file not found.<br />
		    Serve using "python -m http.server"</p>
	    </object>
	</div>

    </body>
    <script>
     // wait until all the resources are loaded
     window.addEventListener("load", plotChanged, false);

     function plotChanged(){
	 var plot = document.querySelector("#plot");
	 var elem = document.querySelector("#opened-file");
	 elem.data = "/" + plot.value + "?view=Fit"
     }
    </script>
</html>

So serving with miniserve --index index.html, it can load PNG files but not PDF files (Tested in firefox).

But serving with python -m http.server it works fine with PDF as well.

image

So I think something is not correctly done in miniserve handling of PDF, but I don't know what. Maybe it's a simple thing as changing the CLI args, in that case it's be easy fix.
@Atreyagaurav
Copy link
Contributor Author

Atreyagaurav commented Sep 30, 2023 •
edited

Also, unrelated to the issure itself.

I don't know what happened to the preview images and PDF talk previously. But I think you can add a sidebar that can be expanded with <object> tag to easily make images and PDF preview with this if you want to add that. Just need to add another button to click on each file that sends their URL to preview tag though. Or even have arrow keybinded to moving along the images/PDfs.

#1150 #681 #981 etc. said they want to preview those things. So if it's easy enough to add a div without much effort, it might be worth it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Atreyagaurav