moxiecode / plupload

Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
http://www.plupload.com
GNU Affero General Public License v3.0
5.63k stars 1.42k forks source link

PDF Preview in Dialog ? #1648

Open sscotti opened 2 years ago

sscotti commented 2 years ago

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:

image

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

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());
        }
    });

},