3

I have upload documents button, from where I can upload images, docs, pdf files and excels. I want to display preview of these selected files.

I am able to display preview of images and PDF files, but not getting how to display preview if file is doc or excel file.

Here is my generic code for displaying preview of a file.

HTML Code is:

<input type="file" name="medical_doc" multiple="multiple" onchange="PreviewDocument('wildlife');" id="preview_animal_doc_wildlife">

JS Code is:

function PreviewDocument(type) {
    var outerDiv = document.createElement("DIV");
    outerDiv.setAttribute("class", 'col-md-2 document-col');
    outerDiv.setAttribute("id", 'append_animal_doc_preview_div');

    var outerImage = document.createElement("EMBED");
    outerImage.setAttribute("class", 'img-doc');
    outerImage.setAttribute("src",  e.target.result);

    outerDiv.appendChild(outerImage);

}

This code works fine if chosen file is PDF and/or Image, but not working for doc or excel files. Any idea of how to display preview of doc and excel files?

fiza khan
  • 1,280
  • 13
  • 24
AmarjaPatil4
  • 1,640
  • 3
  • 28
  • 41
  • It is not possible to display excel or doc files in the browser before uploading, it is possible with pdf and images. – chintuyadavsara Oct 08 '18 at 05:53
  • Then How gmail displays preview of doc as well as excel files preview? Is there any plugin? – AmarjaPatil4 Oct 08 '18 at 05:55
  • Well there is a way but you might need to be creative take a look at this https://stackoverflow.com/questions/27957766/how-do-i-render-a-word-document-doc-docx-in-the-browser-using-javascript – Mohammed Oct 08 '18 at 05:56
  • https://www.grapecity.com/en/blogs/how-to-importexport-excel-files-using-javascript-and-spread-sheets – chintuyadavsara Oct 08 '18 at 05:58
  • @Mohammed, I tried using iframe src with embed true option, but no succes – AmarjaPatil4 Oct 08 '18 at 06:01
  • You will need to render the excel/doc as html and show it on the browser. That is how GMail does it.. – Pavan Andhukuri Oct 08 '18 at 06:09
  • @Amarja for that post you will need to change the remote url to the file you want to show for example: https://codepen.io/anon/pen/JmbJXM?editors=1010. However, that will require you to upload it which I will assume you don't want to do. – Mohammed Oct 08 '18 at 06:12
  • you can use jquery upload preview plug-in for that... – ElusiveCoder Oct 08 '18 at 06:14
  • @Mohammed I tried but with this I think it is trying to search file on google or something.... It is showing me in preview section as 'The requested URL was not found on this server. ' – AmarjaPatil4 Oct 08 '18 at 07:13
  • I am not sure what is going on with it works fine on my end. It's using google docs api to make this work so it is searching a file on google and on a different server too. Anyway, I don't think this is what you want because you would have to upload it to your server then show it back. – Mohammed Oct 08 '18 at 14:39
  • @Mohammed Is this working for you on localhost as well. I also tried this after creating virtual host. Is this because of localhost? – AmarjaPatil4 Oct 09 '18 at 05:53

2 Answers2

1
function ReadURL(input) {
 if (input.files && input.files[0]) {
   var reader = new FileReader();
   reader.onload = function(e) {
     $('#imgFile').attr('src', e.target.result);
    }
   reader.readAsDataURL(input.files[0]);
   }
 }
 $(document).ready(function(){
 $("#imgInp").change(function() {
  ReadURL(this);
 });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="imgFile" src="#" alt="your image" />
</form>

you are not able to show excel and doc file because browser is not supporting that file preview for that purpose you need extra third party control to render that file in to your browser. without data it is not possible.

Negi Rox
  • 3,828
  • 1
  • 11
  • 18
0

If your file was excel you can read it as JSON as here then choose apart from JSON and show it in table

and if it was doc when you read it with FIleReader() which is builtin javascript as readAsDataURL the e.target.result will be a string so choose like the first 5 lines and show it in a div.

hasen2009
  • 39
  • 3