CODEWITHSUNDEEP
javascriptjqueryhtml
user1189338
user1189338

Reputation: 273

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.

Upvotes: 26

Views: 66783

Answers (8)

toHo
toHo

Reputation: 438

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

Upvotes: 0

Luca C.
Luca C.

Reputation: 12574

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

Upvotes: -1

Raphael Felten
Raphael Felten

Reputation: 71

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/

Upvotes: 5

Mavichow
Mavichow

Reputation: 1223

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

Upvotes: 0

Jigar M Dave
Jigar M Dave

Reputation: 311

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>

Upvotes: 30

Quentin
Quentin

Reputation: 943537

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.

Upvotes: 2

Bart Friederichs
Bart Friederichs

Reputation: 33511

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.

Upvotes: 5

ZorleQ
ZorleQ

Reputation: 1427

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.

Upvotes: 3

Related Questions