0

How can i show the preview of the document. Is readasDataUrl is also works for previewing the .pdf, .xls files?

var reader = new FileReader();
    reader.readAsDataURL($files[i]);
    reader.onload = function (loadEvent) {
    $scope.$apply(function () {
       $scope.dataUrlss = loadEvent.target.result;
    });
};

var doc = document.getElementById('FileFrame').contentWindow.document;
doc.open();
doc.write($scope.dataUrlss);
doc.close();

and my iframe tag is 

 <iframe id="FileFrame" src="about:blank" style="height: 900px; width: 700px;"></iframe>

that solution didn't worked for me.Plz help me.Thanks in advance...

User4567
  • 1,005
  • 1
  • 12
  • 27
  • I'm pretty sure you have to set the type of the iframe data to mean PDF if that's what you want in there. If you can make a small jsfiddle I can see if I can work something out. – Jorg Jun 23 '14 at 09:29

1 Answers1

3

This works (fiddle):

var reader = new FileReader();

reader.addEventListener("load", function (event) {

    var div = document.createElement("div");
    div.innerHTML
        = '<object data="' 
        + reader.result 
        + '" type="'+file.type+'">' 
        + '<embed src="' 
        + reader.result 
        + '" type="'+file.type+'" />' 
        + '</object>';
        output.insertBefore(div, null);

});

//Read the file
reader.readAsDataURL(file);

Partial code, see the fiddle for the full thing. I did not put it in angular or an iframe, but the issue was with neither technology, it was in the way it's inserted. This can be easily modified to work with both. some document types like xls or xlsx might require additional work or might not be possible to embed at all.

Jorg
  • 7,219
  • 3
  • 44
  • 65
  • thanks for your answer, it is working file for pdf files but when I come to xls or xlsx files it displaying some plugins are missing – User4567 Jun 25 '14 at 07:31
  • xls/x is harder to embed. it'll probably require MS Office Web Components or something similar installed. you could also convert it to google docs and display that but there are compatibility issues – Jorg Jun 25 '14 at 10:55