getting image from session storage and display

Question

function previewImage() {
  var thisElement = event.target
  var file = thisElement.files;
  var fileReader = new FileReader();
  fileReader.onload = function(event) {
    thisElement.nextElementSibling.querySelector("img").setAttribute("src", event.target.result);
  }
  if (file.length) {
    fileReader.readAsDataURL(file[0])
  }
};

function handleSubmit() {
  const imgPath = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();
  reader.addEventListener("load", function() {
    sessionStorage.setItem("PHOTO", reader.result);
  }, false)
  if (imgPath) {
    reader.readAsDataURL(imgPath);
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
  <div class="border border-dark border-bottom-0 d-flex align-items-center justify-content-center bg-warning">
    <h4 class="d-inline">PHOTO*</h4>
  </div>
</div>
<div class="row">
  <div class="border border-dark border-bottom-0">
    <input type="file" id="file1" accept="image/*" class="form-control" onchange="previewImage();">
    <label for="file1" class="d-flex align-items-center justify-content-center">
<img id="display1" class="w-100 h-100">
</label><br>
  </div>
</div>
<br>
<div class="d-flex justify-content-center">
  <input type="submit" id="submit" onclick="handleSubmit()">
</div>

const o_photo = document.getElementById("display1");
o_photo.src = sessionStorage.getItem("PHOTO");

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
  <div class="border border-dark border-bottom-0 d-flex align-items-center justify-content-center bg-warning">
    <h4 class="d-inline">PHOTO*</h4>
  </div>
</div>
<div class="row">
  <div class="border border-dark border-bottom-0" id="o-file1">
    <img src="" id="display1" class="w-100 h-100">
  </div>
</div>

I am making a form where I upload image & display then after click on submit I display on another file. I am saving the image to session storage & then try to get on another file but it not displaying the image. I tried this code can any one help me where I am getting wrong

I would start by changing `type="submit" id="submit"` to `type="button"` — mplungjan, Jul 02 '22 at 09:01
@mplungjan after that? my main question is to display image on another page. — Azhar, Jul 02 '22 at 09:25
Is it across tabs? Use `localStorage` instead of `sessionStorage` if it is across tabs. [browser sessionStorage. share between tabs?](https://stackoverflow.com/a/20325870/2820150) — novice in DotNet, Jul 02 '22 at 10:39

score 1 · Accepted Answer · answered Jul 02 '22 at 11:13

1

Use localStorage instead of sessionStorage if it is across tabs. browser sessionStorage. share between tabs?

Codepen - save image to localstorage

function handleSubmit() {
  const imgPath = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();
  reader.addEventListener("load", function() {
    localStorage.setItem("PHOTO", reader.result);
  }, false)
  if (imgPath) {
    reader.readAsDataURL(imgPath);
  }
}

Codepen - retrive localStorage image

const o_photo = document.getElementById("display1");
o_photo.src = localStorage.getItem("PHOTO");

answered Jul 02 '22 at 11:13

novice in DotNet

771
1
9
21

how to do it if i have more than 1 input type=file field? – Azhar Jul 02 '22 at 12:38
Is it dynamic or fixed number of images? – novice in DotNet Jul 02 '22 at 12:45
Please check multiple version [save](https://codepen.io/noobplus/pen/ZExGKRG) [Retreive](https://codepen.io/noobplus/pen/YzaXVvY) – novice in DotNet Jul 02 '22 at 12:52
your code work fine except one thing even if i not upload the image then also its display on the next page – Azhar Jul 05 '22 at 03:02
Updated. Please check [Retrieve](https://codepen.io/noobplus/pen/YzaXVvY) – novice in DotNet Jul 05 '22 at 03:41
Updated again. Please check – novice in DotNet Jul 05 '22 at 03:56

getting image from session storage and display

1 Answers1