JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="agrisphere-submission-importer">
  <p>Import a submission file:</p>
  <p><input type="file" id="submission-importer" multiple /></p>
  <ul class="import-submissions-for-review"></ul>
</div>

CSS

.agrisphere-submission-importer{
  font-family: helvetica, serif;
  font-size: 13px;
  padding: 20px;
}
ul.import-submissions-for-review{
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul.import-submissions-for-review>li{
  padding: 15px;
  border: solid 1px #ccc;
  margin-bottom: 10px;
  position: relative;
}
ul.import-submissions-for-review>li>button{
  position: absolute;
  right: 0px;
  top: 0px;
  border: none;
  background: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  width: 32px;
}
ul.import-submissions-for-review>li>p{
  margin: 0px;
}

ul.import-submissions-for-review>button.confirm-import-button{
  background-color: #389845;
  color: #fff;
  border: none;
  padding: 9px;
  cursor: pointer;
}

JavaScript

var importer = document.getElementById('submission-importer');

importer.addEventListener('change',function(event){

	let loaded = 0;

	for(let j=0;j<event.target.files.length;j++){
  
  	let reader = new FileReader();
  
    reader.readAsText(event.target.files[j]);
    reader.onload = function () {
    
    	loaded++;

      let fileData = JSON.parse(reader.result);

      console.log(fileData);
      
      var item = $('<li><p><strong>FORM ID:</strong> ' + fileData.formID + '</p><p><strong>FORM NAME:</strong> ' + fileData.formName + '</p><p><strong>TIMESTAMP:</strong> ' + fileData.formTimestamp + '</p><p><strong>PUBLISHER:</strong> ' + fileData.publisher + '</p><button>X</button></li>');
      
      item.find('button').click(function(){
      
      item.remove();
      
      if(!$('.import-submissions-for-review>li').length){
      
     	 $('.import-submissions-for-review').html('');
      
      }
      
      });
      
      $('.import-submissions-for-review').append(item);
      
      if(loaded == event.target.files.length){
      
      	let mainbutton = $('<button class="confirm-import-button">Confirm Import</button>');
      
      	$('.import-submissions-for-review').append(mainbutton);
        
        importer.value = '';
      
      }

    };

    reader.onerror = function (error) {

      alert("An Error Occurred While Attempting To Read The Selected File!");

    };
  
  }
	
});

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}