26

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.

user1189338
  • 273
  • 1
  • 3
  • 5
  • No, you cannot do that. You'll need a document viewer on the client side. (plugin for example) – Bart Friederichs Jun 27 '13 at 13:35
  • Why do you need this anyways? Can't they just view the document themselves before they upload it? – Svish Jun 27 '13 at 13:36
  • 1
    Could maybe try to extract some meta-data from the files and use that as a small sanity preview? Size, title, author, first sentence, etc. Should at least be possible with docx which I believe is just xml? – Svish Jun 27 '13 at 13:48
  • @Svish Good idea. I'll think about that. Thanks. – user1189338 Jun 27 '13 at 13:49

8 Answers8

30

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"/>&nbsp;
        <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>
Jigar M Dave
  • 311
  • 3
  • 3
5

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.

Bart Friederichs
  • 33,050
  • 15
  • 95
  • 195
5

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('<a href="' + file + '" target="_blank">' + event.target.files[0].name + '</a>');
});

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/

Raphael Felten
  • 61
  • 1
  • 2
  • Its better if you post jsfiddle. – TarangP Jan 10 '18 at 12:03
  • This ended up being the answer that worked out for me. You can display the blob inside an object tag which ends up making a proper upload preview. I'd post a JSFiddle with my changes, but I can't render an embedded object since it's sandboxed. – Memedon Jun 08 '18 at 15:26
3

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.

ZorleQ
  • 1,417
  • 13
  • 23
  • 2
    Still, you'd need to upload it first before you can view it. Or are you talking local data access by the browser from an online HTML document? That's a Bad Idea on many levels. – Bart Friederichs Jun 27 '13 at 13:37
  • That is a terrible idea, but if the guy is desperate, can't see any other way. – ZorleQ Jun 27 '13 at 14:01
  • 1
    if the guy is desperate, he should deny the assignment. Give it back to the client, tell them it is not possible within the quality/safety demands he put in place for his software. Better to deliver nothing than something that is way below your quality standards. It'll hunt you forever. – Bart Friederichs Jun 27 '13 at 14:03
2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

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

Mavichow
  • 1,213
  • 17
  • 41
0

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

toHo
  • 398
  • 5
  • 28
-1

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

Luca C.
  • 11,714
  • 1
  • 86
  • 77