PDF Preview in Dialog ?

[sscotti]

Not sure if anyone has already done this or is interested, but I added some code in my version that generates a PDF preview if the document being uploaded is a PDF document. I'd have to go back and look what I actually did, but the result is like this:

Looks like it is in the FilesAdded event handler and requires adding:

<script src="/bower/pdfjs-dist/build/pdf.min.js"></script> <script src="/bower/pdfjs-dist/build/pdf.worker.min.js"></script>

FilesAdded: function(up, files) {
    // Called when files are added to queue
    log('[FilesAdded]');

    plupload.each(files, function(file) {
        //log('  File:', file.id);
        if(file.type == "application/pdf"){
        var fileReader = new FileReader();
        fileReader.onload = function() {

            var pdfData = new Uint8Array(this.result);
            // Using DocumentInitParameters object to load binary data.
            var loadingTask = pdfjsLib.getDocument({data: pdfData});
            loadingTask.promise.then(function(pdf) {
                console.log('PDF loaded');

                // Fetch the first page
                var pageNumber = 1;
                pdf.getPage(pageNumber).then(function(page) {
                // console.log(page._pageInfo.view);
                scale = 120 / (Math.max(page._pageInfo.view[2], page._pageInfo.view[3])) ;
                console.log('Page loaded');
                var viewport = page.getViewport({scale: scale});
                // Prepare canvas using PDF page dimensions
                let thumbcontainer = $('[id=' + file.id + ']').find(".plupload_file_dummy");
                var canvas = loadCanvas(thumbcontainer[0]);
                var context = canvas.getContext('2d');
                // Render PDF page into canvas context
                var renderContext = {
                canvasContext: context,
                viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.promise.then(function () {
                console.log('Page rendered');
                });
            });
            }, function (reason) {
            // PDF loading error
            console.error(reason);
            });
        };
        fileReader.readAsArrayBuffer(file.getSource().getSource());
        }
    });

},