Storing Images in Local Storage

by sbhomra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <h1>
    Example: Storing Images in Local Storage
  </h1>
  <input id="image-upload" type="file" />
  <ul id="image-collection">
  </ul>
</div>

CSS

#image-collection li {
  float: left;
  display: block;
  margin: 5px;
}

JavaScript

const fileUploadLimit = 1048576; // 1MB in bytes. Formula: 1MB = 1 * 1024 * 1024.
const localStorageKey = "images";
let imageData = [];

// Render image in HTML by adding to the unordered list.
function renderImage(imageObj, $imageCollection) {
  if (imageObj.file_base64.length) {
    $imageCollection.append("<li><img src=\"data:image/png;base64," + imageObj.file_base64 + "\"  width=\"200\" /><br />" + imageObj.name + "<br /><a href=\"#\" data-timestamp=\"" + imageObj.timestamp + "\" class=\"btn-delete\">Remove</a></li>")
  }
}

// Add image to local storage.
function addImage(imageObj) {
  imageData.push(imageObj);
  localStorage.setItem(localStorageKey, JSON.stringify(imageData));
}

// Remove image from local storage by timestamp.
function removeImage(timestamp) {
  // Remove item by the timestamp.
  imageData = imageData.filter(img => img.timestamp !== timestamp);

  // Update local storage.
  localStorage.setItem(localStorageKey, JSON.stringify(imageData));
}

// Read image data stored in local storage.
function getImages($imageCollection) {
  const localStorageData = localStorage.getItem(localStorageKey);

  if (localStorageData !== null) {
    imageData = JSON.parse(localStorage.getItem(localStorageKey))

    for (let i = 0; i < imageData.length; i++) {
      renderImage(imageData[i], $imageCollection);
    }
  }
}

// Delete button action to fire off deletion.
function deleteImageAction() {
  $(".btn-delete").on("click", function(e) {
    e.preventDefault();

    removeImage($(this).data("timestamp"));

    // Remove the HTML markup for this image.
    $(this).parent().remove();
  })
}

// Upload action to fire off file upload automatically.
function uploadChangeAction($upload, $imageCollection) {
  $upload.on("change", function(e) {
    e.preventDefault();

    // Ensure validation message is removed (if one is present).
    $upload.next("p").remove();

    const file = e.target.files[0];

    if (file.size <= fileUploadLimit) {
      const reader = new...