Drag and drop image and store base 64 string then display

<form method="post" action="/upload">
    <input type="file"><input id="fileDragName" name="file_name"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData" name="image_base64">
    <div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc" id="holder"></div>
    <input type="submit" value="Submit"></input>
  </form>
 
  <script type="text/javascript">
    function readfiles(files) {
      for (var i = 0; i < files.length; i++) {
        document.getElementById('fileDragName').value = files[i].name
        document.getElementById('fileDragSize').value = files[i].size
        document.getElementById('fileDragType').value = files[i].type
        document.getElementById('fileDragData').value = files[i].slice();
        reader = new FileReader();
        reader.onload = function(event) {
          document.getElementById('fileDragData').value = event.target.result;}
        reader.readAsDataURL(files[i]);
      }
    }
    var holder = document.getElementById('holder');
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondragend = function () { this.className = ''; return false; };
    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();
      readfiles(e.dataTransfer.files);
    }
  </script>
  <style type="text/css">
      #holder.hover { border: 10px dashed #0c0 !important; }
  </style>

  <img src="<%= @document.image_base64 %>">