Opening file selected by the user

I have the code below and i would like to, if the user desires, to show the pdf that was added (using the input element), in a new tab or open the file.

Is this even possible?

<div class="uploadButtonSection">
   <input type="image" src="clip.png" ngf-select="uploadFiles($files)" multiple
            accept="application/pdf" ngf-max-height="1000" ngf-max-size="5MB" class="uploadIcon"/>

 <ul class="uploadList">
    <li ng-repeat="file in files" style="font:smaller">   
       <div class="attachmentIcon">
         <a href="#" target="_blank"><img src="pdf-icon.png"></a>
         <div class="customBtn" ng-click="removeFile(file)">Remove</div>
            {{file.name}}
       </div>     
    </li>
 </ul>
</div>

You can do it using URL.createObjectURL and passing your selected file to it.

let url = URL.createObjectURL(selectedFile);
window.open(url, "_blank");

Here's a fiddle for you to get a quick gist.

But the problem is that most browser's are going to block you from opening a new tab after you select your file. <<Popup Blocked>>

You can try showing some button to open that file. Somewhat similar to this fiddle, but I'm not sure this will work in all cases.