TypeScript

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.min.js" integrity="sha512-BagCUdQjQ2Ncd42n5GGuXQn1qwkHL2jCSkxN5+ot9076d5wAI8bcciSooQaI3OG3YLj6L97dKAFaRvhSXVO0/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<app id="app">
<label for="avatar">Choose a pdf file:</label>
<input type="file" id="pdfFile" name="pdfFile" accept="application/pdf">  
</app>
<script>
document.getElementById("pdfFile").addEventListener("change", function(event) {
  let file = event.target.files[0];
  console.log(file.name);
  let reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = function(e) {
    var docInitParams = {
      data: e.target.result,
      password: ''
    };  
    pdfjsLib.getDocument(docInitParams).promise.then((pdfDocument) => {
        // get all the pages from pdf, works if not password protected.
        const numPages = pdfDocument.numPages;
        console.log('Doc not password protected');
      }).catch(err => console.log(err))
  }
},false);
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}