diff options
| author | John MacFarlane <[email protected]> | 2022-08-24 14:17:39 -0700 |
|---|---|---|
| committer | John MacFarlane <[email protected]> | 2022-08-24 16:28:55 -0700 |
| commit | e352e9e5ed7d7e3e5190fc277bf9c130203fd683 (patch) | |
| tree | 247b9bdb23ac449fea3f247493a8bbd98e210b86 | |
| parent | 1c5b63b2e50984ad0a724e8ca03e507f8e3a1a30 (diff) | |
trypandoc: add ability to upload support files.
| -rw-r--r-- | trypandoc/index.html | 9 | ||||
| -rw-r--r-- | trypandoc/trypandoc.js | 64 |
2 files changed, 72 insertions, 1 deletions
diff --git a/trypandoc/index.html b/trypandoc/index.html index 0e462d04a..a3fe98e6d 100644 --- a/trypandoc/index.html +++ b/trypandoc/index.html @@ -27,6 +27,9 @@ pre#command { margin-top: 1em; background-color: transparent; border: none; } a#permalink { margin-top: 6pt; margin-bottom: 6pt; display: block; } #examples { margin-left: 6pt; } + div.file div.title { margin-bottom: 0; } + span.filename { } + div.file textarea { margin-top: 0; } </style> </head> <body> @@ -107,7 +110,11 @@ --> <textarea id="text" rows="15"></textarea> <br/> - + <div id="files"> + </div> + <br/> + <label for="addfile">Add support file</label> + <input id="addfile" type="file" /> </div> <div id="topane"> <label for="to"> diff --git a/trypandoc/trypandoc.js b/trypandoc/trypandoc.js index 6f91c9326..4032c5a97 100644 --- a/trypandoc/trypandoc.js +++ b/trypandoc/trypandoc.js @@ -162,6 +162,42 @@ function clearText() { document.getElementById("text").value = ''; } +function addSupportFile(e) { + +} + +function addFile(name, contents) { + if (params.files[name]) { + throw("File " + name + " already exists. Remove it before re-adding."); + return; + } + params.files[name] = contents; + let filesDiv = document.getElementById("files"); + let fileDiv = document.createElement("div"); + fileDiv.classList.add("file"); + let title = document.createElement("div"); + title.classList.add("title"); + let removeButton = document.createElement("button"); + removeButton.textContent = "Remove"; + removeButton.onclick = (e) => { + delete params.files[name]; + e.target.parentElement.parentElement.remove(); + } + let filename = document.createElement("span"); + filename.classList.add("filename"); + filename.textContent = name; + title.appendChild(filename); + title.appendChild(removeButton); + fileDiv.appendChild(title); + let textarea = document.createElement("textarea"); + textarea.onchange = (e) => { + params.files[name] = e.target.value; + } + textarea.textContent = contents; + fileDiv.appendChild(textarea); + filesDiv.appendChild(fileDiv); +} + function permalink() { let href = window.location.href; const URLparams = new URLSearchParams(Object.entries(params)); @@ -323,6 +359,34 @@ function setFormFromParams() { } }); + const addfileButton = document.getElementById("addfile"); + addfileButton.addEventListener('change', (e) => { + // Get a reference to the file + const file = e.target.files[0]; + const mimetype = file.type; + let binary = binaryMimeTypes[mimetype]; + + // Encode the file using the FileReader API + const reader = new FileReader(); + reader.onloadend = () => { + // Use a regex to remove data url part + if (binary) { + const base64String = reader.result + .replace('data:', '') + .replace(/^.+,/, ''); + addFile(file.name, base64String); + } else { + addFile(file.name, reader.result); + } + }; + if (binary) { + reader.readAsDataURL(file); + } else { + reader.readAsText(file); + } + + }); + // const supportFiles = document.getElementById('supportfiles'); // // // Listen for the change event so we can capture the file |