Added button for parsing from file selector. Also clear forms button will clear the input selector
<button type="submit" onclick="json(jsoninput.value)">Parse ACH file</button>
<button type="submit" onclick="clearForms()">Clear Forms</button>
</div>
+ <div>
+ <label for="input-file">Specify a file:</label><br>
+ <input type="file" id="input-file">
+ </div>
</form>
</body>
<script>
const clearForms = function() {
jsoninput.value = ""
jsonoutput.value = ""
+ document.getElementById('input-file').value = ''
}
achform.addEventListener('submit', (event) => {
event.preventDefault();
json(jsoninput.value)
})
+
+ document.getElementById('input-file')
+ .addEventListener('change', parseFromFile)
+
+ function parseFromFile(event) {
+ const input = event.target
+ if ('files' in input && input.files.length > 0) {
+ placeFileContent(
+ document.getElementById('jsonoutput'),
+ input.files[0])
+ }
+ }
+
+ function placeFileContent(target, file) {
+ readFileContent(file).then(content => {
+ json(content)
+ }).catch(error => console.log(error))
+ }
+
+ function readFileContent(file) {
+ const reader = new FileReader()
+ return new Promise((resolve, reject) => {
+ reader.onload = event => resolve(event.target.result)
+ reader.onerror = error => reject(error)
+ reader.readAsText(file)
+ })
+ }
</script>
</html>
