Looking for a way to capture an image using html input capature image. and save it to local storage before submission

Question

I am trying to capture an image using HTML an input tag for file image capture. And save it to local storage before submission. For offline use in a web app

I am using:

<input type="file"
   name="picture"
   accept="image/*"
   capture="user">

All I can find is how to save an image already on the page to local storage, or from a canvas, but not from Form Data.

Thanks.

Does this answer your question? [Javascript FileReader Multiple Images](https://stackoverflow.com/questions/29218333/javascript-filereader-multiple-images) — Dean Van Greunen, Jun 22 '23 at 11:40

score 1 · Answer 1 · answered Jun 25 '23 at 15:50

You need to create a FileReader that read the content of the image, and when loaded, store to localStorage (localStorage does not work here on SO).

const img = document.getElementById('img');

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  var reader = new FileReader();
  reader.addEventListener('loadend', e => {
    img.src = e.target.result;
    // save to localStorage
    //localStorage.setItem('picture', e.target.result);
  });
  reader.readAsDataURL(data.get('picture'));
});

<form name="form01">
  <input type="file" name="picture" accept="image/*" capture="user" required />
  <button>Save</button>
</form>
<img id="img" />

Looking for a way to capture an image using html input capature image. and save it to local storage before submission

1 Answers1