0

Am able to upload an image to the first web page using file input tag in a form. But I want to display that same image on another page when I click Submit button.

`

`<div class="profile-pic-div" id="input_field">
  <input type="file" class="myfile" id="imgfile" accept="image/png, image/jpg">
</div>`
Andrew Kahuma
  • 1
  • Assuming the ***uploaded*** image is less than 5MB, you could convert the image to a DataURL and then store it in `localStorage`. The second page would just check the value in `localStorage` and could load the image. – EssXTee Sep 28 '22 at 12:29
  • Out of curiosity: what's the main requirement for that? – Nico Haase Sep 28 '22 at 14:44

1 Answers1

0

Here is a functional version of what I described in my comment.

You can use a FileReader() to read the value of the file input and use the readAsDataURL method to convert the image to a DataURL. This can then be stored in localStorage and read later on a different page (assuming all pages are on the same domain/site).

Unfortunately StackSnippets have limitations on things like reading files and localStorage. The same applies to places like CodePen and jsfiddle. Because of this I cannot post a live demo, but I can give you the source code.

NOTE: Again, this StackSnippet demo DOES NOT WORK HERE on StackOverflow. StackOverflow restricts access to things like localStorage and file readers. You will need to try this in a .html file you save.

<!doctype html>
<html>
<head>
  <title>Save Uploaded Image in LocalStorage</title>
  <style>
    input[type="file"] {
      vertical-align: middle;
      padding: 1em 2em;
      border: 1px solid #CCC;
      border-radius: 0.4em;
    }

    .save {
      font-size: 1.2em;
      vertical-align: middle;
      padding: 0.6em 1em;
    }

    img {
      max-width: 10em;
      max-height: 10em;
    }
  </style>
</head>
<body>

  <div id="status">Waiting...</div>
  <input type="file" id="file" onchange="_ReadImage()">
  <br>
  <br>
  <img id="img">
  <br>
  <input type="button" value="Load Image" onclick="_LoadImage()">
  <br>
  <br>
  <br>
  <br>
  <p>Clicking <a href="javascript:location.reload();">this link</a> just reloads the page, but should <i>simulate</i> going to a new page where you could load the image data via localStorage.</p>

  <script>
    const _ReadImage = () => {
      document.querySelector("#status").innerText = `Reading File...`;
      let f = document.querySelector("#file");
      if(f.files && f.files[0]) {
        var reader = new FileReader();
        reader.onload = e => {
          _SaveImage(e.target.result);
        }
        reader.readAsDataURL(f.files[0]);
      }
    }
    const _SaveImage = img => {
      localStorage.setItem("img", img);
      document.querySelector("#status").innerText = `Saved!`;
    }
    const _LoadImage = () => {
      if(localStorage.getItem("img")) {
        document.querySelector("#img").src = localStorage.getItem("img");
        document.querySelector("#status").innerText = `Image Loaded!`;
      } else {
        document.querySelector("#status").innerText = `No Image!`;
      }
    }
  </script>

</body>
</html>
EssXTee
  • 1,783
  • 1
  • 13
  • 18