2 years ago

#54841

test-img

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

Accepted video resources