iframe pdf preview at change event

Question

$(document).ready(function(){

  $("#id_quotationFile").change(function(){

    url=$("#id_quotationFile").attr(value);
    $("#pdf-view").attr("src",url);
    
  });
});

Trying to load pdf file browsed in input field using above jquery code but not working

<input type=file id="id_quotationFile">
           

<iframe src="" id="pdf-view" frameborder="0px" title="Preview"></iframe>

How to preview pdf file in iframe.

Answer 1

As mentioned in this question, try to force your iframe to reload:

document.getElementById('some_frame_id').contentWindow.location.reload();

What’s the best way to reload / refresh an iframe?

In your case it will be:

$("#pdf-view").contentWindow.location.reload();

Answer 2

Consider the following.

$(function() {
  function readURL(input, target) {
    input = $(input).get(0);
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $(target).attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
      $(".details").html("Preview: '" + input.files[0].name + "' Type: " + input.files[0].type);
    }
  }

  $("#fileUpload").click(function() {
    $("#id_quotationFile").trigger("click");
  });
  $("#id_quotationFile").change(function() {
    readURL(this, $("#pdf-view"));
  });
});

input {
  display: none;
}

button {
  padding: 0.2em 0.4em;
  margin: 0.2em;
}

iframe {
  width: 95%;
  height: 840px;
}

.details {
font-family: Arial, Monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="fileUpload">Browse...</button>
<input type=file id="id_quotationFile">
<span class="details">&nbsp;</span>
<iframe src="" id="pdf-view" frameborder="0px" title="Preview"></iframe>

Reference: Preview an image before it is uploaded

You need to convert the local file into a new FileReader. So we read the File, convert it into a Base64, and when it's ready, load it into the Target.