Как записать данние с FileReader в переменную?

Question

Помогите понять как сделать запись данних из файла в переменную HTML

<input type="file" id="file">
<button id="load">Load JSON File</button>

JS

document.querySelector("#load").addEventListener("click", function() {
  let file = document.querySelector("#file").files[0]
  let reader = new FileReader()
  let data;
  reader.onload = function(event) {
    data = event.target.result
    // console.log(reader.result);
  }
  reader.readAsText(file)
  console.log(data); // в консоли undefined
})

Answer 1

Ваша ошибка в том , что ваш код не синхронен. Т.е. reader.onload выполняется не сразу и в это время код идёт дальше. data не успевает получить значения перед тем как вывестись в консоль.

Вот вам сразу два решения

Выводить внутри load

document.querySelector("#load").addEventListener("click", function() {
  let file = document.querySelector("#file").files[0]
  let data;
  let reader = new FileReader()
  reader.onload = function(event) {
    data = event.target.result
    // console.log(reader.result);
    console.log(data); 
  }
  reader.readAsText(file)
  
})

Сделать функцию load синхронной

document.querySelector("#load").addEventListener("click", async function() {
    /// функция у клика async обратите внимание
    let file = document.querySelector("#file").files[0]

    let data;

    ////ваш код

    data = await loadFile(file)

    console.log(data)
    
})
function loadFile(file){
    return new Promise(resolve=>{
        let reader = new FileReader()
        
        reader.onload = function(event) {
            let data = event.target.result
            resolve(data)
        }
        reader.readAsText(file)
    })
}

БЛОГ НА HUSL

Как записать данние с FileReader в переменную?

Ответы (1 шт):