title: Display a preview of a pdf before upload on chrome
body: <p>I would like to display a preview of a pdf before upload. It works on firefox but not on chrome. If I try with an image, it works on both.</p>
  
  <p>Here my code:</p>
  
  <pre><code>&lt;input required="required" accept="image/*, application/pdf" class="uploadjs" data-id="3" type="file"&gt;
  
  &lt;div class="preview"&gt;
    &lt;img id="preview-3" alt=""&gt;
    &lt;embed id="preview-3_1" type="application/pdf"&gt;
  &lt;/div&gt;
  
  
  function readURL(input, id) 
  {
      var mime= input.files[0].type;
  
      if (input.files &amp;&amp; input.files[0]) 
      {
          var reader = new FileReader();
  
          reader.onload = function (e) 
          {
              if(mime.split("/")[0]=="image")
              {
                  $('#preview-'+id+'_1').attr('src', '');
                  $('#preview-'+id).attr('src', e.target.result);
  
              }
              else
              {
                  $('#preview-'+id).attr('src', '');
                  $('#preview-'+id+'_1').attr('src', e.target.result);
              }
          }
  
          reader.readAsDataURL(input.files[0]);
      }
  }
  
  $(function()
  {
      $(".uploadjs").change(function()
      {
          var id = $(this).data('id')
          readURL(this, id);
      });
  })
  </code></pre>
  
  <p>And a jsfiddle: <a href="https://jsfiddle.net/g9ttqxyj/2/" rel="nofollow noreferrer">https://jsfiddle.net/g9ttqxyj/2/</a></p>
  
  <p>I have tried multiple ideas like: embed, iframe and object but none works on chrome.</p>