Read file from relative path as ArrayBuffer

Question

I'm trying to read a local file into an ArrayBuffer using the FileReader API, like this

let reader = new FileReader();

reader.onload = function(e) {
    let arrayBuffer = new Uint8Array(reader.result);
    console.log(arrayBuffer);
}

reader.readAsArrayBuffer(new File([], 'data.txt'));

But I'm getting an empty arrayBuffer

How can I read this local file as an ArrayBuffer in my browser?

Thank you.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader Important note: FileReader is used to read file content from the user's (remote) system in secure ways only. It cannot be used to simply read a file by pathname from a file system. To read files by pathname in JavaScript, standard Ajax solutions should be used to do server-side file reading, with CORS permission if reading cross-domain. — BlueWater86, Jan 15 '20 at 22:47

score 6 · Answer 1 · answered Jan 15 '20 at 22:52

You cannot read a file by pathname through a browser. You need to have the user interact with the file system and choose a file before you can read the content.

const readFile = e => {
  const file = e.target.files[0]
  let reader = new FileReader();

  reader.onload = function(e) {
      let arrayBuffer = new Uint8Array(reader.result);
      console.log(arrayBuffer);
  }

  reader.readAsArrayBuffer(file);
}

document.querySelector("#fileItem").onchange=readFile

<input id="fileItem" type="file">

Read file from relative path as ArrayBuffer

1 Answers1