title: How to get value of input type = image and display it on image?
body: <p>I am looking for an example where the value of the <code>&lt;input type="file"&gt;</code> can be stored into a variable and then from there stored into <code>localStorage</code> so it is not lost when the page is refreshed, and I couldn't find the solution for what I was looking for.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
  
    //Get value of input type file
    let userInput = document.getElementById("uploadImage").value;
  
    //Store value into LocalStorage
    localStorage.setItem("image", JSON.stringify(userInput))
  }
  
  // Display "image" in Local storage as src of img preview even after page refreshes
  document.getElementById("imagePreview").setAttribute("src", JSON.parse(localStorage.getItem("image")))</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    max-width: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="file" accept="image/*" id="uploadImage"&gt;
  &lt;br&gt;
  &lt;button onclick="myFunction()"&gt;
    Submit Picture
  &lt;/button&gt;
  &lt;br&gt;
  &lt;img id="imagePreview"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To summarize, I want to know how to save the input value into a variable, then the variable into the local storage. Finally, display the localStorage in an image tag so it is not lost when the page is refreshed. Please let me know if you have any questions as I know it might be a bit confusing. Here's a jsFiddle as shown here: <a href="https://jsfiddle.net/vedt_/zrvuwbj7/44/#&amp;togetherjs=gbLynsQ627" rel="nofollow noreferrer">https://jsfiddle.net/vedt_/zrvuwbj7/44/#&amp;togetherjs=gbLynsQ627</a> feel free to edit it if you know how to do it.</p>