how to see a file added with input file

Question

I have a file input in my html, all the file extension are allowed:

<input id="inputFile" name="inputFile" type="file">

When I add a file, I would like to add a "view file" button:

<a id="view" name="view" href="#">

What I tried to open the file:

var document = $('#inputFile').val();
     value : "C:\fakepath\file.pdf"

var popup = window.open(document, 
    'Documentos', 
    'titlebar=no,toolbar=no,location=no,status=no,menubar=no,resizable=no,width=800,height=600,top=0,left=0,type=fullWindow,fullscreen=no,scrollbars=yes');

  error in console: (unknown) Not allowed to load local resource: file:///C:/fakepath/file.pdf

I also tried with fileReader without success:

var file = $('#inputFile').prop('files')[0];
fr = new FileReader();
fr.readAsDataURL( file );

when try to print fr I only have his data, not the file

Answer 1

You can try bellow solution

var file = $('#inputFile').prop('files')[0];
fr = new FileReader();

fr.addEventListener("load", function () {
    var document = fr.result;
    var popup = window.open(document,'Documentos', 'titlebar=no,toolbar=no,location=no,status=no,menubar=no,resizable=no,width=800,height=600,top=0,left=0,type=fullWindow,fullscreen=no,scrollbars=yes');
}, false);