Preview PDF/Image file before upload

Question

Is there anyway where pdf/image file can auto preview/shown in iframe before uploading without need click on preview button?

function PreviewImage() {
    pdffile=document.getElementById("uploadPDF").files[0];
    pdffile_url=URL.createObjectURL(pdffile);
    $('#viewer').attr('src',pdffile_url);
}

<form name=f1 method=post enctype="multipart/form-data">
    <input id="uploadPDF" type="file" name="file"/>&nbsp;
    <input type="button" value="Preview" onclick="PreviewImage();" />

    <div style="clear:both">
       <iframe id="viewer" frameborder="0" scrolling="no" width="300" height="200"></iframe>
    </div>
    <button type="submit" name="submit" class="btn btn-success btn-sm">
      <i class="fa fa-dot-circle-o"></i> Add
    </button>&emsp;
</form>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Possible duplicate of https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Harvey, Mar 15 '19 at 06:24
Heya, don't think previewing pdf,doc etc. is possible thought, just images — Harvey, Mar 15 '19 at 06:24

score 13 · Accepted Answer · answered Mar 15 '19 at 07:05

you can use javascript pdf library like this one (i'm using pdf.js) from this link : https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

$("#myPdf").on("change", function(e){
 var file = e.target.files[0]
 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 loaded');
    
    var scale = 1.5;
    var viewport = page.getViewport({scale: scale});

    // Prepare canvas using PDF page dimensions
    var canvas = $("#pdfViewer")[0];
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

<input type="file" id="myPdf" /><br>
<canvas id="pdfViewer"></canvas>

score 12 · Answer 2 · answered Oct 07 '19 at 11:30

12

You have an input, check the onChange and then make a

 src= URL.createObjectURL(event.target.files[0])

to create URL: and then use it to preview with embed

<embed  
       src=src
       width="250"
       height="200">

Read more here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

answered Oct 07 '19 at 11:30

Steve Phuc

601
8
12

2

At the first time I was exceptic about your solution but I proceed to test it and I was amazed because it is simplest way and it is just what I need. Here is your thumb up friend. Thank you. – Yury Euceda Mar 26 '20 at 17:42
worked very well, awesome stuff !! – ManuEl Magak Apr 06 '21 at 11:47

score 0 · Answer 3 · answered Dec 03 '20 at 07:06

0

pdf.js & pdf.worker.js is free to use. or any restriction. i want to use for commercial purpose

answered Dec 03 '20 at 07:06

MAYUR SANCHETI

1
3

This is a question not an answer to the question above. – Dec 03 '20 at 08:31
does anyone know , i want to use this both file for company . please help . this is small question & same to this topic . – MAYUR SANCHETI Dec 04 '20 at 04:35

Preview PDF/Image file before upload

3 Answers3

Linked