title: How do I show the preview of the file (jpeg/png) selected in a new HTML page?
body: <p>What I am trying to do is pass the selected file object from the current html page <strong>(current.html)</strong> to another html page <strong>(preview.html)</strong> and show a preview of the image selected, there.</p>
  <p><strong>current.html</strong>:</p>
  <pre class="lang-html prettyprint-override"><code>
  Upload image: &lt;input type=&quot;file&quot; accept=&quot;.jpeg , .png&quot; id=&quot;img&quot;&gt;&lt;br&gt;
  &lt;button id=&quot;button&quot; onclick = &quot;submit()&quot; &gt;Register&lt;/button&gt;
     
  &lt;script type=&quot;text/javascript&quot;&gt;
     
     var file=document.getElementById(&quot;img&quot;).files[0];
     document.cookie=&quot;Image =&quot; + file + &quot;;&quot; + &quot;path=/&quot;;
     window.location.href=&quot;preview.html&quot;;
     
  &lt;/script&gt;
  
  </code></pre>
  <p><strong>preview.html</strong></p>
  <pre class="lang-html prettyprint-override"><code> Image: &lt;img src=&quot;&quot; alt=&quot;&quot; id=&quot;image&quot;&gt;&lt;br&gt;
      
   &lt;script type=&quot;text/javascript&quot;&gt;
      
      var arr=document.cookie.split(';');
  
      for(var i = 0; i &lt; arr.length; i++){
           
         var c = arr[i].split('=');
         if(c[0].trim() == 'Image'){
            var reader = new FileReader();
            reader.onload = function() {
               document.getElementById(&quot;image&quot;).src = reader.result;
            }
            if (c[1]) { reader.readAsDataURL(c[1]); }
         }
      }
  &lt;/script&gt;
  </code></pre>
  <p>But no image shows up in <strong>preview.html</strong>. Instead I keep getting an error in the console tab:</p>
  <pre><code>uncaught typeerror: failed to execute 'readasdataurl' on 'filereader': parameter 1 is not of type 'blob'.
  </code></pre>
  <p>How can I fix this?</p>