Error: Invalid or corrupted PDF file Firefox

Question

I am trying to upload a PDF file and once done uploading, I am trying to show that PDF file in an IFrame with the stream content I have with me in scope. Same code works if I upload an image file but throws below error for PDF upload in Firefox.

Error

Invalid or corrupted PDF file.
PDF.js v1.9.583 (build: d7b37ae7)
Message: Invalid PDF structure
viewer.js:1359:7
Error: Invalid or corrupted PDF file.

HTML

<input type="file" id="files" name="files[]" multiple />

<iframe id="uploadedFileIframe" title="PDF in an i-Frame" src=""  scrolling="auto" height="400" width="400" />

CSS

  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }

JavaScript

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('pdf.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.

          var enc = btoa(unescape(encodeURIComponent( e.target.result)))
          document.getElementById('uploadedFileIframe').setAttribute('src','data:application/pdf;base64,'+ enc);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

It looks like you've overengineered the solution a little bit

document.getElementById('uploadedFileIframe').src = reader.result;

should work if you place it instead of

var enc = btoa(unescape(encodeURIComponent( e.target.result)))   
document.getElementById('uploadedFileIframe').setAttribute('src','data:application/pdf;base64,'+ enc);

https://jsfiddle.net/kc8sdas5/

Answer 2

You are accepting multiple files to be selected and you are always replacing the same iframe with a new source. You don't create a new iframe for each file. Also you don't have to read the file as a base64 string, it's pointless and also a bad for performances and memory. You could instead use the URL.createObjectURL instead, which is syncron, so you can get rid of your closure

 function handleFileSelect(evt) { var files = evt.target.files; // FileList object var previews = document.querySelector('#previews'); var iframe; var URL = window.URL || webkitURL; // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process pdf files. if (!f.type.match('pdf.*')) { continue; } iframe = document.createElement('iframe') iframe.title = "PDF in an i-Frame"; iframe.scrolling = "auto"; iframe.width = iframe.hight = 400; iframe.src = URL.createObjectURL(f); previews.appendChild(iframe); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); 

 <input type="file" id="files" name="files[]" multiple /> <div id="previews"></div>