HTML: Storing Uploaded Photo in LocalStorage

Question

I am building a web application that will allow users to take a photograph with the builtin camera and upload the photo to the application, which will store the photo in memory. Currently, I am using the line of code below to capture and upload the photo.

<input type="file" accept="image/*">

How do I store the image in localStorage? Is there any way to implement this feature in Javascript within the HTML?

This might not be the full answer to your question, but I think [this](https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/) might prove a helpful resource. — Angelos Chalaris, Sep 26 '17 at 20:54

score 1 · Accepted Answer · answered Sep 26 '17 at 21:01

Try something like this:

const input = document.getElementsByTagName('input')[0]; // or id or whatever selector you want to use

input.onchange = (function(e) {
  const file = e.path[0].files[0];
  const reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function() {
    const id = 'blobid' + (new Date()).getTime();
    const blobCache = tinymce.activeEditor.editorUpload.blobCache;
    const base64 = reader.result.split(',')[1];
    localStorage.setItem('imageString', base64);
  };
});

HTML: Storing Uploaded Photo in LocalStorage

1 Answers1