JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <input type="file" name="avatar" id="avatar">
    <input type="text" name="name" id="name">
    <input type="submit">
</form>
<h3>Preview (Old Image)</h3>
<img id="show">

JavaScript

window.input = $('#myForm').find('#avatar')[0];
window.preview = $('#show');
window.avatar;

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

function changeFile() {
  avatar = input.files[0];
  var reader  = new FileReader();
  var path = URL.createObjectURL(avatar);
  alert(path);
  preview[0].src=path;
  reader.addEventListener("load", function () {
     var data = reader.result;
     localStorage.setItem('fileData',JSON.stringify({name:avatar.name,data:data}));
  }, false);

  if (avatar) {
    reader.readAsDataURL(avatar);
  }

}

input.addEventListener('change', changeFile);

window.init = function(){
   
   var fileData = localStorage.getItem('fileData');
   if(fileData) {
    fileData = JSON.parse(fileData);
    avatar=dataURLtoFile(fileData.data,"filename");
    var path = URL.createObjectURL(avatar);
    preview[0].src=path;
   }
   
   
}

init();