We Keep Coding

How to upload PDF to google drive and embed them in a HTML static site?

I have a static HTML site. It's for a little food shop. They need to upload their menus and other every month. SO they need to upload PDF documents somehow. I think uploading to google drive is better. No ? It's easy than creating a seperate admin view to upload files and all.
so anyone can tell me how can I upload PDF in google drive and embed the link in my code ? There are eight menus and they need to show as thumbnails. When users click on them, they will download.

You need to share the pdf file to "Public on the web"
The go to file > embedded this pdf file. This will give you the html code.
Copy and paate it in your html code
Refer http://www.mybloggerlab.com/2013/03/how-to-embed-pdf-and-other-documents-in-blogger-posts.html

It is simple to upload a PDF in Google Drive and embed a direct download link into your code. I have inserted an excerpt from labnol.org
Google Drive doesn’t offer a simple option for creating these “direct download” link but you can easily create them by slightly modifying the generated URLs. Here’s the trick.
A file hosted on Google Drive has a shared link that looks like this
https://drive.google.com/file/d/FILE_ID/edit?usp=sharing
When you access this link, it will render the file in the browser but if you can rewrite this URL slightly, the link, when clicked, will download the corresponding file in the user’s browser instead of opening it in the browser. The modified URL would be:
https://drive.google.com/uc?export=download&id=FILE_ID
All you have to do is make note of the FILE_ID in the original URL and use it in the modified URL. For example, here’s an image file hosted on Google Drive that will open in the browser and here’s the modified URL that forces the browser to download the file.

Just do...this and enjoy
INSERT_YOUR_ID_HERE = your pdf file id
1st solution below
<iframe src="https://drive.google.com/file/d/**INSERT_YOUR_ID_HERE**/preview" height="100%" width="100%" frameBorder="2" scrolling="auto" ></iframe>
2nd solution
<embed
src="https://drive.google.com/file/d/**INSERT_YOUR_ID_HERE**/preview"
height="100%"
width="100%"
></embed>
enter image description here

Opening a local pdf file in iframe with javascript

I am using the below code to open a pdf file but its not working-
<iframe src="file:///C:\Users\Downloads\0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>
For a google doc the below code is working fine, I am not sure what is required to open a locally saved doc.
<iframe src="http://docs.google.com/gview?url=http://webshire-aioopsss.com/pdfs/sample_contract.pdf&embedded=true" style="height:638px;" frameborder="0"></iframe>

Most browsers won't let you open a locally stored file from a website for security reasons. Typically I will host the file on an IIS server and then retrieve it from there (which is what you're doing when you're retrieving it from googledoc).

You are using backslashes in your src. Please change them to slashes
<iframe src="file:///C:/Users/Downloads/0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>

You can use
var pdf = $('\<\object type="application/pdf">');
pdf.attr('data', "you pdf scr");
append it in your iframe..

How to change the browsers' pdf viewer through program (e.g. HTML, JS, PHP )?

Goal : A browser base pdf viewer that has zoom and drag/ pan function (better if allow hiding the save function) to replace the browser default one
Problem : all browser (exclude old IE) has their own build in pdf viewer, that without dragging/pan function
Currently this code use default pdf viewer:
<object id = 'zoomPage' type='application/pdf' data= '1.pdf'>
<p>The PDF can not display
</p>
</object>
Is it possible to force all browser (Chrome , FireFox , IE8+) using the adobe reader to open pdf file using javascript / jquery / html /php? Or are there any web base pdf viewer has the functions mentioned above?
Note:
For the first approach :
I found the way e.g.
content-disposition : attachment
but it only change the behavior from viewing to download the pdf , not changing the preference in opening the pdf file

For approach 2: (Which I recommend)
Check out:
https://github.com/mozilla/pdf.js/
PDF.js is Portable Document Format (PDF) viewer that is built with
HTML5.
PDF.js is community-driven and supported by Mozilla Labs. Our goal is
to create a general-purpose, web standards-based platform for parsing
and rendering PDFs.
EDIT: For your speed needs, check the discussion on the other options here: Recommended way to embed PDF in HTML? and see if the other options fit your requirements.
Approach 1 is inherently dicey due to security reasons

The only way you can force it client-side is by supplying the alternative...such as pdf.js, zoho, google pdf viewer, scribd, etc (there are many). I'm not sure if Adobe provides an in-browser pdf viewer like you're expecting.
The default pdf viewer is kept in a variable found in about:config that can only be changed by the user.

Is it possible to force all browser (Chrome , FireFox , IE8+) using
the adobe reader to open pdf file using javascript / jquery / html
/php?
You could try this by using an iframe pointing to the pdf file. The browser will automatically open the pdf file using a pdf reader software on client machine. Like this:
<iframe src="yourpdffile" style="width:100%;height:500px"></iframe>

you can't force something on the client for a security issue, but you can check with something like this. My previous sentence follows by the experience that I have on browsers and coding but maybe I can say something wrong.
You can control if there's Adobe Reader using javascript and a code that check if there is the Reader installed with a script like this (I've used these lines months ago and they work)
Try to use this plugin that maybe is for you pourpose (the first sentence link).

You can also use google docs viewer to achieve this functionality.
Just refer this link : https://docs.google.com/viewer
You can get the iframe url and put it in your site.
<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.yoursite.com%2Fpdf%2Ftest.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>
please note that the value of the url parameter in the src is url encoded.
Check out the JS Fiddle example here

Embed generated PDF-Files in IE8+

Iam trying to embed a client-side generated PDF (from jsPDF) as base64-encoded String in IE+8 with no success for hours.
I tried object and embed-tags as well as iframe.
Its not working at all :(
This is my example "PDF" which works in chrome and firefox:
<object type="application/pdf" style="width:100%;height:400px;" data="data:application/pdf;base64,JVBERi0xLjMKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovQ29udGVudHMgNCAwIFI+PgplbmRvYmoKNCAwIG9iago8PC9MZW5ndGggNzA+PgpzdHJlYW0KMC41NyB3CjAgRwpCVAovRjEgMTYgVGYKMTYgVEwKMCBnCjU2LjY5IDc4NS4yMCBUZAooSGVsbG8gd29ybGQuKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCjEgMCBvYmoKPDwvVHlwZSAvUGFnZXMKL0tpZHMgWzMgMCBSIF0KL0NvdW50IDEKL01lZGlhQm94IFswIDAgNTk1LjI4IDg0MS44OV0KPj4KZW5kb2JqCjUgMCBvYmoKPDwvQmFzZUZvbnQvSGVsdmV0aWNhL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago2IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1Cb2xkL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago3IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1PYmxpcXVlL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iago4IDAgb2JqCjw8L0Jhc2VGb250L0hlbHZldGljYS1Cb2xkT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKOSAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyL1R5cGUvRm9udAovRW5jb2RpbmcvU3RhbmRhcmRFbmNvZGluZwovU3VidHlwZS9UeXBlMT4+CmVuZG9iagoxMCAwIG9iago8PC9CYXNlRm9udC9Db3VyaWVyLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjExIDAgb2JqCjw8L0Jhc2VGb250L0NvdXJpZXItT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTIgMCBvYmoKPDwvQmFzZUZvbnQvQ291cmllci1Cb2xkT2JsaXF1ZS9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTMgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtUm9tYW4vVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE0IDAgb2JqCjw8L0Jhc2VGb250L1RpbWVzLUJvbGQvVHlwZS9Gb250Ci9FbmNvZGluZy9TdGFuZGFyZEVuY29kaW5nCi9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjE1IDAgb2JqCjw8L0Jhc2VGb250L1RpbWVzLUl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMTYgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZEl0YWxpYy9UeXBlL0ZvbnQKL0VuY29kaW5nL1N0YW5kYXJkRW5jb2RpbmcKL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMiAwIG9iago8PAovUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0KL0ZvbnQgPDwKL0YxIDUgMCBSCi9GMiA2IDAgUgovRjMgNyAwIFIKL0Y0IDggMCBSCi9GNSA5IDAgUgovRjYgMTAgMCBSCi9GNyAxMSAwIFIKL0Y4IDEyIDAgUgovRjkgMTMgMCBSCi9GMTAgMTQgMCBSCi9GMTEgMTUgMCBSCi9GMTIgMTYgMCBSCj4+Ci9YT2JqZWN0IDw8Cj4+Cj4+CmVuZG9iagoxNyAwIG9iago8PAovUHJvZHVjZXIgKGpzUERGIDAuOS4wcmMyKQovQ3JlYXRpb25EYXRlIChEOjIwMTMwNzAzMTAwODM1KQo+PgplbmRvYmoKMTggMCBvYmoKPDwKL1R5cGUgL0NhdGFsb2cKL1BhZ2VzIDEgMCBSCi9PcGVuQWN0aW9uIFszIDAgUiAvRml0SCBudWxsXQovUGFnZUxheW91dCAvT25lQ29sdW1uCj4+CmVuZG9iagp4cmVmCjAgMTkKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMjA1IDAwMDAwIG4gCjAwMDAwMDE0NDYgMDAwMDAgbiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDg3IDAwMDAwIG4gCjAwMDAwMDAyOTIgMDAwMDAgbiAKMDAwMDAwMDM4MyAwMDAwMCBuIAowMDAwMDAwNDc5IDAwMDAwIG4gCjAwMDAwMDA1NzggMDAwMDAgbiAKMDAwMDAwMDY4MSAwMDAwMCBuIAowMDAwMDAwNzcwIDAwMDAwIG4gCjAwMDAwMDA4NjUgMDAwMDAgbiAKMDAwMDAwMDk2MyAwMDAwMCBuIAowMDAwMDAxMDY1IDAwMDAwIG4gCjAwMDAwMDExNTkgMDAwMDAgbiAKMDAwMDAwMTI1MiAwMDAwMCBuIAowMDAwMDAxMzQ3IDAwMDAwIG4gCjAwMDAwMDE2NzAgMDAwMDAgbiAKMDAwMDAwMTc1MiAwMDAwMCBuIAp0cmFpbGVyCjw8Ci9TaXplIDE5Ci9Sb290IDE4IDAgUgovSW5mbyAxNyAwIFIKPj4Kc3RhcnR4cmVmCjE4NTYKJSVFT0Y=" >
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.</p>
</object>
Thanks in Advance for any hint!

IE8 only supports base64 strings for images and the object tag(images only):
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Preview .doc/.docx/.pdf files before uploading to server

I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.

I have tried to create little example and that would display PDF Preview before uploading PDF file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>

Not sure if anyone still checks this thread, but i thought i'd share what i did.
Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('' + event.target.files[0].name + '');
});
This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works.
Here's an example: https://jsfiddle.net/j9gw023b/3/

No. This is not possible.
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.

The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.

Back in the days you were able to do something like that:
<object data="word.doc">You do not have Word installed on your machine</object>
Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.

Ajax upload your file,then after uploaded return path name and preview it.
blueimp's jQuery-File-Upload was great for me.
you can view its basic plugin.
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

You can do it with pdf, here is the tutorial:
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Don't know if it is possible for doc/docx

You can do it using this web component: https://avipunes.github.io/file-viewer/
This web component under the hood uses some microsoft embedding endpoint:
https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}
you can see an example here:
https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls