diff --git a/assets/js/read-files.js b/assets/js/read-files.js index 5ba0fe8..acf0835 100644 --- a/assets/js/read-files.js +++ b/assets/js/read-files.js @@ -1,3 +1,48 @@ + +async function printSingleFileAsText(evt) { + try { + //let file = evt.target.files[0]; + let fileContent = await getSingleFileAsText(evt); + console.log(fileContent); + } + catch(err) { + console.log(err); + } +} + +function getSingleFileAsText(evt) { + return new Promise((resolve, reject) => { + //Retrieve the first (and only!) File from the FileList object + let result = ""; + + let file = evt.target.files[0]; + + if (file) { + let fileReader = new FileReader(); + fileReader.onload = function (event) { + let contents = event.target.result; + //let words = getWords(contents); + resolve(contents); + } + + fileReader.onerror = reject + + fileReader.readAsText(file); + } + }) +} + + +let fileInput = document.getElementById('fileinput'); +fileInput.addEventListener('change', printSingleFileAsText, false); +//fileInput.addEventListener('change', getSingleFileAsText, false); + + +/***************************************************************************************************/ +/***************************************THIS IS THE OLD CODE****************************************/ +/***************************************************************************************************/ + +/* function printSingleFileAsText(evt) { let fileContent = getSingleFileAsText(evt); console.log(fileContent); @@ -13,7 +58,11 @@ function getSingleFileAsText(evt) { let contents = event.target.result; let words = getWords(contents); } - return fileReader.readAsText(file) + + //this returns undefined because the function triggered by onload is asynchronous + //I therefore placed the console.log of the file contents inside the onload function + return fileReader.readAsText(file); + } } @@ -26,7 +75,37 @@ function getWords(s) { } return result; } +*/ -let fileInput = document.getElementById('fileinput'); -fileInput.addEventListener('change', getSingleFileAsText, false); \ No newline at end of file +/***************************************************************************************************/ +/********THIS IS CODE I FOUND ONLINE. SO SIMPLE AND STRAIGHTFORWARD*********************************/ +/********FINALLY UNDERSTAND HOW TO MAKE PROMISES!***************************************************/ +/************https://simon-schraeder.de/posts/filereader-async/ ************************************/ +/***************************************************************************************************/ + +/* +function readFileAsync(file) { + return new Promise((resolve, reject) => { + let reader = new FileReader(); + + reader.onload = () => { + resolve(reader.result); + }; + + reader.onerror = reject; + + reader.readAsArrayBuffer(file); + }) +} + +async function processFile() { + try { + let file = document.getElementById('fileInput').files[0]; + let contentBuffer = await readFileAsync(file); + console.log(contentBuffer); + } catch(err) { + console.log(err); + } +} +*/ \ No newline at end of file