File load and Display

axiosScript.js

axios({
    url: `${config.BASE}/download/${this.section.urlSingular}_50.pdf`,
    method: 'GET',
    headers: LocalStorage.get('inv.headers'),
    responseType: 'blob'
})
.then((response) => {
    this.urlPdf = URL.createObjectURL(response.data)
})
.catch((error) => {
    console.log('ERROR   ', error)
})

index.html

<input id="file-input" type="file" onchange="onUpload(this)" />
<div id="display-pdf"></div>

script.js

function onUpload(input) {  
  let originalFile = input.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(originalFile);
  reader.onload = () => {
    let json = JSON.stringify({ dataURL: reader.result });

    // View the file
    let fileURL = JSON.parse(json).dataURL;
    $("#display-pdf").empty();
    $("#display-pdf").append(`<object data="${fileURL}"
      type="application/pdf" width="400px" height="200px">
    </object>`);

    // View the original file
    let originalFileURL = URL.createObjectURL(originalFile);
    $("#display-pdf").append(`<object data="${originalFileURL}"
      type="application/pdf" width="400px" height="200px">
    </object>`)
    .onload(() => {
      URL.revokeObjectURL(originalFileURL);
    });
  };
}