Search code examples
javascriptfileselectfileapipdfobject

File Select/File API - Sending files to Embedded PDFObject

So I'm trying to use file select (or file API) to select file from desktop and send it to an embedded PDF viewer in my HTML Doc. I've tried a lot of different ways with my limited knowledge to push the file from the file-api to the PDFObject and nothing seems to work. I'm not sure if it's not able to do this or if I'm just doing it wrong in many different ways.

    <head>
    <link href="http://pdfobject.com/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://pdfobject.com/scripts/pdfobject.js"></script>
    <script type="text/javascript">
        window.onload = function (){
            var myPDF = new PDFObject(handleFileSelect).embed(); 
// ORIGINALLY var myPDF = new PDFObject({ URL: "location" }).embed();
        };
    </script>
</head>
<body>
    <div id="pdf">It appears you don't have Adobe Reader or PDF support in this web browser. <a href="/pdf/sample.pdf">Click here to download the PDF</a></div>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

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

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                      f.size, ' bytes, last modified: ',
                      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                      '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }

      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

Can I use file select/file api to select and push a document to the PDFObject viewer or does it not allow that sort of connection?

Solution

  • Simply retrieve the url of the file by creating one: 

    url=window.URL.createObjectURL(inputFile);

    and then embed the file by giving PDFObject this url:

    PDFObject.embed(url, "#fileContainer");