JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<p>
  <input type="file" id="import" accept=".json">
</p>
<p id="styles">
  <select id="styleselector"></select>
  <button id="export">Export</button> 
</p>

CSS

#styles {
  display: none;
}
#styles.active {
  display: block;
}

JavaScript

const fileSelector = document.getElementById('import');
fileSelector.addEventListener('change', (event) => {
  const fileList = event.target.files;
  for (const file of fileList) {
    readFile(file);
  }
});

function readFile(file) {
  if (file.type && file.type.indexOf('/json') === -1) {
    console.log('Import is not a JSON file.', file.type, file);
    return;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    let result = event.target.result.replace("data:application/json;base64,","");
    result = result.replace("&quot;", '"');
    result = result.replace("&amp;", '&');
    result = atob(result).replace(/\t|\r|\n/gi, "");
    const data = JSON.parse(result);
    
    if (!Array.isArray(data)) {
    	console.log("Stylus data is not formatted properly").
      return;
    }
    
    data.forEach((stylus) => {
    	console.log(stylus.name, stylus.sections.length)
    })
  });
  reader.readAsDataURL(file);
}