Split TXT Files

by MegaScience

HTML

<table id="mainTable">
  <tr>
    <td>Select a File to Load:</td>
    <td><input type="file" accept=".txt" id="fileToLoad"></td>
  </tr>
</table>

CSS

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

table {
  width: calc(100% - 5px);
  box-sizing: border-box;
}

input {
  width: 100%;
}

textarea {
  width: 100%;
  height: 20vh;
}

JavaScript

/*function loadFileAsText() {
  var fileToLoad = document.getElementById("fileToLoad").files[0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
    var textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById("inputTextToSave").value = textFromFileLoaded;
  };

  fileReader.readAsText(fileToLoad, "UTF-8");
}*/

function main() {
  const customLog = (...v) => console.log('File Reader:', ...v)
  const mainTable = document.getElementById('mainTable')
  const inputFiles = document.getElementById('fileToLoad')
  const reader = new FileReader()
  //const r = /.{1,49999}/g
  const r = /[\s\S]{1,49999}/g
  const clearDisposible = () => document.querySelectorAll('tr.disposible').forEach(e => e.remove())
  //const loadTextFromfile = event => reader.readAsText((event?.dataTransfer ?? event?.originalTarget).files[0], 'UTF-8')
  const loadTextFromfile = event => {
    event.stopPropagation()
    event.preventDefault()
    // event?.dataTransfer ?? event?.originalTarget
    const target = event?.dataTransfer ?? event?.originalTarget
    const file = target?.items?.[0]?.getAsFile() ?? target?.files?.[0]
    try {
      if (!file.type.startsWith('text/')) throw `Submitted file is "${file.type}". It must be a text file.`
			if (file.size > 99999) throw `Submitted file is ${file.size} bytes. The file must be below 100000 bytes. This file is ${file.size - 100000} more bytes than the maximum.`
			reader.readAsText(file, 'UTF-8')
    } catch (e) {
      clearDisposible()
      mainTable.appendChild(createTableRow(e, false))
      customLog(e)
    }
  }
	const copyToClipboard = e => navigator.clipboard.writeText(e.currentTarget.value)
  const createTableRow = (txt, clickClipboard = true) => {
    const tr = document.createElement('tr')
    const td = document.createElement('td')
    const ta = document.createElement('textarea')
    ta.value = txt
		if (clickClipboard) {
			ta.title = 'Click to add to...