JSFiddle - React, Tailwind, and code Playground

by nake89

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<input type="file" class="chooseFile" id="selectFiles" value="Import" data-multiple-caption="{count} files selected" multiple /><br />
<label for="selectFiles" class="inputFile"><span class="spanfileclass">Choose some file</span></label><br />
<div class="leftmargin">
  <label class="w3-text-blue"><b>New name</b></label>
  <input type="text" id="newname" class="w3-input w3-border w3-round-large w3-animate-input" style="width:30%" /><br />
  <label class="w3-text-blue"><b>Multiplier</b></label>
  <input type="text" id="multiplier" class="w3-input w3-border w3-round-large w3-animate-input" style="width:30%" /><br />
  <p  style="width:70%">E.g. To make new food in Cronometer such as date paste, export "Dates" JSON from Cronometer.
Then import the file If the date paste is 15% water and 85% dates, then make the multiplier 0.85 and name it as you want.</p>

  <button id="import" class="w3-btn w3-blue" onclick="getJson('download')">Download new json</button>
  <button id="show" class="w3-btn w3-blue" onclick="getJson('show')">Show new json</button>
  <textarea id="result"></textarea>
</div>

CSS

#result {
  display: block;
  width: 400px;
  height: 200px;
  margin-top: 10px;
}

.leftmargin {
  margin-left: 10px;
}

.marginpercentright {
  margin-right: 30%;
}

#selectFiles {
  margin: 10px 0px 10px 0px;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputFile {
  font-size: 1.25em;
  font-weight: 700;
  color: white;
  background-color: #4286f4;
  display: inline-block;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

label:hover.inputFile {
  background-color: #2c68c9;
}

JavaScript

function getJson(getJsonStatus) {
	var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }

  var fr = new FileReader();

  fr.onload = function(e) {
    console.log(e);
    var result = JSON.parse(e.target.result);
    var i;
    var nutr = "";
    for (i = 0; i < result.nutrients.length; i++) {
      if (result.nutrients[i].amount != null) {
        result.nutrients[i].amount = result.nutrients[i].amount * document.getElementById('multiplier').value;
      }
    }
    result.name = document.getElementById('newname').value;
    if (getJsonStatus == "download") {
      var filename = document.getElementById('newname').value;
    	filename = filename.replace(/\W/g, '');
      filename = filename.toLowerCase();
   		downloadObjectAsJson(result, filename);
    } else if (getJsonStatus == "show") {
      var formatted = JSON.stringify(result, null, 2);
      document.getElementById('result').value = formatted;
    }
  }

  fr.readAsText(files.item(0));
}

function downloadObjectAsJson(exportObj, exportName) {
  var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
  var downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.setAttribute("href", dataStr);
  downloadAnchorNode.setAttribute("download", exportName + ".json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();
}

var inputs = document.querySelectorAll('.chooseFile');
Array.prototype.forEach.call(inputs, function(input) {
  var label = input.nextElementSibling,
    labelVal = label.innerHTML;

  input.addEventListener('change', function(e) {
    var fileName = '';
    if (this.files && this.files.length > 1) {
      fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
    } else {
      fileName = e.target.value.split('\\').pop();
    }

    if...