Read a file in Javascript without blocking I/O

Question

How can I read a file using FileReader() without it blocking I/O while reading? The following is how I am doing it now:

function readImageFile(imageFile, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        callback(e.target.result);
    };
    reader.readAsDataURL(imageFile);
}

Which works fine except that I need to process very large images (> 4k resolution) which takes a considerable amount of time. I can't have user input blocked from using other features on the page while reading.

Answer 1

I believe FileReader is already asynchronous: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

FileReaderSync would be the synchronous version: https://developer.mozilla.org/en-US/docs/Web/API/FileReaderSync

Answer 2

FileReader.readAsDataURL is asynchronous. It's not blocking UI by definition (https://www.w3.org/TR/FileAPI/). But to process a file the computer need to spend some resource, so you need to consider this. It's possible that processing a big file requests a lot of resources.