JSFiddle - React, Tailwind, and code Playground

by Krzysztof Jedraszewski

HTML

<div class="change">
  <label for="browse">New Upload...</label>
  <input id="browse" type="file" name="browse">
</div>

<div id="dailyPic">
</div>

CSS

#dailyPic {
  background-repeat: no-repeat;
  background-size: cover;
}

JavaScript

var defaultIMG = "./image/MyAlbum/yourDefaultImage.jpg";
var dailyPic = document.getElementById("dailyPic");
var myBrowse = document.getElementById("browse");
var isStorage = false;

if (typeof(Storage) !== "undefined") {
  isStorage = true;
  if (localStorage.getItem("url") === null) {
    localStorage.setItem("url", defaultIMG);
  };
  dailyPic.style.backgroundImage = 'url(' + localStorage.getItem("url") + ')';
} else {
  // If Storage not supported try other method
}
if (isStorage) {
  myBrowse.addEventListener("change", function() {
    var ImgId = this.value.toString().substr(12, 6);
    var NewImg = "url('./image/MyAlbum/" + ImgId + "')";
     localStorage.setItem("url", NewImg);
     dailyPic.style.backgroundImage = 'url(' + localStorage.getItem("url") + ')';
  });
} else {
  // Storage not supported
};