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 56 · Answer 1 · answered Oct 07 '19 at 11:30

56

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

1,168
2
11
12

7

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
1

Works well for PDF's as well – Artem Krasniuk Aug 16 '21 at 20:18

score 20 · 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>

how can i insert file to embed or frame tag, when i get file from user? — , Jan 17 '22 at 08:33

score 1 · Answer 3 · answered Nov 25 '22 at 08:41

How to preview PDF ,excel and Image before upload in pop window.

I have done something for me issue its working fine for me . also have added the blank pop once you are going to choose next file. I have created for MVC .

JavaScript:

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>



    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>

   <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';

            $("#Document").on("change", function (e) 
            {

           
                
                
                $("#dialog").dialog({
                    width: 700,
                    height: 500,
                    
                    
                    dialogClass: "dialog-full-mode" /*must to add this class name*/
                   
                });

                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);
                }
                //$('#excel_data').empty("");
          



                if (file.type == "image/jpeg") 
                {
                    
                    debugger
                    document.getElementById("img1").style.display = "block";
                    
                        var reader = new FileReader();
                        reader.onload = function () {
                            var output = document.getElementById('img1');
                            output.src = reader.result;
                        };
                        reader.readAsDataURL(e.target.files[0]);

                  //  $('#img1').attr("src", "");
                  
                     
                }
                if (file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") 
                {
                    var reader = new FileReader();

                    reader.readAsArrayBuffer(e.target.files[0]);

                    reader.onload = function (e) {

                        var data = new Uint8Array(reader.result);

                        var work_book = XLSX.read(data, { type: 'array' });

                        var sheet_name = work_book.SheetNames;

                        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], { header: 1 });

                        if (sheet_data.length > 0) {
                            var table_output = '<table class="table table-striped table-bordered">';

                            for (var row = 0; row < sheet_data.length; row++) {

                                table_output += '<tr>';

                                for (var cell = 0; cell < sheet_data[row].length; cell++) {

                                    if (row == 0) {

                                        table_output += '<th>' + sheet_data[row][cell] + '</th>';

                                    }
                                    else {

                                        table_output += '<td>' + sheet_data[row][cell] + '</td>';

                                    }

                                }

                                table_output += '</tr>';

                            }

                            table_output += '</table>';

                            document.getElementById('excel_data').innerHTML = table_output;
                        }

                        
                    }
                }

            });







                


                

        </script>

    @Html.LabelFor(model => model.Document, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.EditorFor(model => model.Document, new { htmlAttributes = new {type="file",accept=".xlsx,.xls,image/*,.pdf", @class = "form-control" } })
                            @Html.ValidationMessageFor(m => m.Document, "", new { @class = "text-danger" })

                            <div id="dialog" style="display: none; width:auto;  ">
                                <img src="" id="img1" class="img1" style="display:none;"><br>

                                <div id="excel_data" class="mt-5" ></div>

                                <canvas id="pdfViewer" ></canvas>
                            </div>

Preview PDF/Image file before upload

3 Answers3

Linked