0

I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code. I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution. I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.

I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?

Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer

A.S.J
  • 627
  • 3
  • 14
  • 38

1 Answers1

1

I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.

...however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image...

What are you using for the form (query language & database management)?

(PHP, Django, MySQL, MongoDB, etc)

Are there any other/better ways to embed a pdf- or image-file in an html page?

I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.

Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer

Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.

Check out this link on iframes. (will also tell you how to keep the user from resizing it)

lanadeltaco
  • 108
  • 8
  • Thank you very much for your reply! I'm using php for the form and considering what you wrote, I'll probably go with embed but I will try both andd which one works out the best! – A.S.J Dec 01 '17 at 07:08
  • (hope this is not off-topic, but it does relate to your answer imo) and neither of them seem perfect. I can not resize the image in the iframe and I keep getting error messages saying that the resource tried loading a document but transferred an image/jpeg, on the other hand, I can't seem to be able to preview images when using embed (for whatever reason, however, when I create a new embed tag using js to use for the preview , it somehow works,but it's not a good solution). So there's nothing else I can try? – A.S.J Dec 01 '17 at 15:45
  • If you're using iframes, I would recommend placing the file or image tag in it's own page (This is where you would set the styling). Then pass the path through the url. Example: Let's say you created a page called display_file.php. Your iframe tag would look something like this: `` In display_file.php, you'd have `"; ?>` – lanadeltaco Dec 01 '17 at 17:16
  • I'm wondering if the "resource tried loading..." is some kind of webkit bug. Hard for me to say what's going on without seeing the code for that and also the embed issue. I know people have several different interpretations of previewing images and I'm wondering what it means to you. I hope some of this is helpful! Feel free to paste your code here or dm me on twitter @thelanadeltaco and I'll help you to the best of my ability :) – lanadeltaco Dec 01 '17 at 17:31
  • again, thank you very much! :) What I mean by previewing the image is, that the user uploads the file by clicking on the upload button in the form and can immediately see it before the form is submitted (I'm using FileReader for that). Placing the file in its own page sounds good, however, I don't really know how to implement that since I don't know what file the user is gonna use later, but I guess I could get the size of the image and resize it automatically according to that. – A.S.J Dec 04 '17 at 07:07
  • Hey! Sorry I didn't see this earlier. So the user clicks upload. The file is stored in its respective folder. Be sure to save the path of that file (option: you can add another column in your database that is associated with the user). When you call your query to get the user data, you pull the value (example: user_file) and place that in a variable (ex. `$user_file = $row['user_file']`). You can even check the file extension to see if it's an image or pdf [here's a good S.O. link on that](https://stackoverflow.com/questions/173868/how-to-getextract-a-file-extension-in-php) – lanadeltaco Dec 06 '17 at 23:19