2 years ago
#54841
Jay
Scoping/Async of FileReader .readAsText and .onload methods to fill array with txt data
Using keypresses P and C for two local .txt file-uploads
readin50.txt which contains string-val "50" & readin60.txt which contains string-val "60"
P-press to upload readin50.txt pushes "50" to txtDatas
-array
C-press to upload readin60.txt doesn't push "60" subsequently to txtDatas
-array (but I want it to)
When I run again reader.readAsText(document.querySelector('#upload').files[0]);
in console it populates txtDatas
-array with the latest chosen readin##.txt value of "60"
Press P-key..
- console.log..
P key press
(choose readin50.txt ://pozitive-energy.glitch.me/readin50.txt) - console.log..
inputBtn called
- console.log..
<input type="file" id="upload"> 'FILE'
- console.log..
checking
(waits for user to choose-a-file-upload) - console.log..
50 target.result
txtDatas = ['50']
(ok good)
Press C-key..
- console.log..
C key press
(choose readin60.txt ://../readin60.txt) - console.log..
<input type="file" id="upload"> 'FILE'
- console.log..
checking
(waits for users upload file choice) - console.log..
50 target.result
txtDatas = ['50', '50']
(want ['50', '60'])
Run again reader.readAsText(document.querySelector('#upload').files[0]);
..
- console.log..
60 target.result
txtDatas = ['50', '50', '60']
(want ['50', '60'])
Want to push 50 to txtDatas
-array after upload of readin50.txt and subsequently push 60 to txtDatas
-array after upload of readin60.txt ['50', '60']
global scope..
const reader = new FileReader();
var txtDatas = [];
var simulateClick = function (elem) {
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
var canceled = !elem.dispatchEvent(evt);
};
var b = document.getElementsByTagName('body')[0];
b.addEventListener("keydown", (evt) => {
console.log(evt.keyCode); //log keycode
if(evt.keyCode == "80"){
console.log("P key press");
var pbtn = document.getElementById('ifile');
setTimeout(function(){ simulateClick(pbtn); },200);
setKeypressChooseFile();
pbtn.style.display = "none";
}
});
function setKeypressChooseFile() {
b.addEventListener("keydown", (evt) => {
if(evt.keyCode == "67"){
console.log("C key press");
setTimeout(function(){ fileRead(document.querySelector('#upload')); },200);
}
});
}
//create div and create-button
(function helper() {
let div = document.createElement('div');
div.id = "target_div";
div.innerHTML = '<p>init</p>';
document.body.appendChild(div);
let btn = document.createElement("button");
btn.id ="ifile";
btn.innerHTML = "PULL";
document.body.appendChild(btn);
btn.setAttribute("onclick","inputBtn();");
})();
function fileRead(c) {
if(c){
simulateClick(c);
};
var file = document.querySelector('#upload');
console.log(file, "FILE"); //shows file object
//setInterval to check if file uploaded then clear
var checkFile = setInterval(() => {
console.log("checking");
if (typeof(document.querySelector('#upload').files[0]) == "object") {
reader.readAsText(document.querySelector('#upload').files[0]);
reader.onload = res => { console.log(res.target.result, "target.result"); txtDatas.push(res.target.result); }
reader.onerror = err => console.log(err);
clearInterval(checkFile);
}
}, 1000);
}
function inputBtn() {
var input = document.createElement('input');
input.type = "file";
input.id = "upload";
var simulateClick = function (elem) {
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
var canceled = !elem.dispatchEvent(evt);
};
setTimeout(function(){ simulateClick(input); },200);
console.log("inputBtn called");
document.getElementById('target_div').appendChild(input);
fileRead(false);
}
javascript
asynchronous
filereader
onload
0 Answers
Your Answer