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

Question

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 thi

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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