0

I have a current setup in React js where I upload files to s3 using multipart upload as buffer.However if the file format is pdf,video,audio etc. I want to convert it to image before uploading to s3; think of it as thumbnail generation.I have read a lot about this but could not find a right solution for my needs, can please someone suggest some possible solution?(where backend is not involved at all) PS:I have looked at pdf.js but dont know how to use it while my file type is buffer and what type will it return and can I upload it the same way to S3.A small example would help miles. Thanks in advance !!

    var pdfData = buffer;
    var pdfjsLib = window['pdfjs-dist/build/pdf'];

    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';

    var loadingTask = pdfjsLib.getDocument({data: pdfData});
    loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');
        pdf.getPage(1).then(function getPageHelloWorld(page) {

            var scale = 1.5;
            var viewport = page.getViewport(scale);
            console.log('page',viewport);
            //
            // Prepare canvas using PDF page dimensions
            //
            var canvas = document.getElementById('bulk-thumbnails');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            //
            // Render PDF page into canvas context
            //
            page.render({canvasContext: context, viewport: viewport});
        });
SHIKHAR SINGH
  • 419
  • 6
  • 17

2 Answers2

2

According to the 2nd example of pdf.js (in the link below) you can also load pdf file using its base64 code.

https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

var pdfData = atob('PDF file in Base64...');
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

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

And To load pdf file as base64 code you can actually use HTML5 FileReader like this

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the base64 string

Referenced from How to convert file to base64 in JavaScript?

Hope it helps

Osama Sheikh
  • 994
  • 1
  • 11
  • 15
  • Thanks @Osama Sheikh. I have aone more doubt what if I don't have a canvas where I am displaying the image.Its a simple img tag within a div.How do we go about it? – SHIKHAR SINGH Nov 22 '18 at 09:22
  • Not sure about image, why not just use canvas, and if you don't want to show canvas then just hide it using css tricks (like setting position fixed and moving the element out of screen using top and left properties) – Osama Sheikh Nov 22 '18 at 09:31
  • How do I get the actual image here so that I can upload it to s3 as well? – SHIKHAR SINGH Nov 22 '18 at 09:32
  • I have pasted the code that I am using currently.My aim is not to show it instantly some where but to store it as a n image and then use it elsewhere.I guess the canvas part just works for only time being because it isn't saved anywhere.Correct? – SHIKHAR SINGH Nov 22 '18 at 09:34
  • Check this thread https://stackoverflow.com/questions/12921052/parsing-pdf-pages-as-javascript-images – Osama Sheikh Nov 22 '18 at 11:20
0

I have built a functionality on the above link check this out

StackBlitz

Gulshan Jangra
  • 1
  • 3