How to avoid NotReadable occurring while using FileReader

I am writing a code to read a file attachment using FileReader. When the code gets executed on certain machines, I'm receiving NotReadable Error from the error callback

DOM Exception: The requested file could not be read, typically due to 
permission problems that have occurred after a reference to a file is acquired

Below is my code:

$(document).on("change", "input[type='file']", function (event) {
  var files = event.target.files;
  if (files[0]) {
    var reader = new FileReader();
    reader.onload = () => {
      $(event.target)
        .closest(".row")
        .find(".attachment-data")
        .val(reader.result.split(",")[1]);
    };
    reader.onerror = (error) => {
      //Always ends up here on certain devices
      console.log("reader.onerror", error);
    };
    reader.readAsDataURL(files[0]);
  }
});