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.

Why do you think your readImageFile would be blocking?

Bergi
– Bergi

2016-02-02 01:51:08 +00:00
Commented Feb 2, 2016 at 1:51 — Bergi
– Bergi, Commented Feb 2, 2016 at 1:51

Sanketh Katta · Accepted Answer · 2016-02-02 02:00:31Z

3

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

answered Feb 2, 2016 at 2:00

Sanketh Katta

6,3612 gold badges32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joey Over a year ago

You are correct; I discovered that it was the callback that used the dataURL (in this case, styling the background image of a div) that was causing the blocking.

Microfed · Accepted Answer · 2016-02-02 02:01:38Z

1

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.

answered Feb 2, 2016 at 2:01

Microfed

2,89824 silver badges26 bronze badges

Collectives™ on Stack Overflow

Read a file in Javascript without blocking I/O

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related