Let’s say we’re developing an e-commerce application. Are there any practical use-cases to use Web Workers and objects for binary data? We don’t ask this question if we work on 3D stuff or image processing.

Let’s take a look at this picture:

Let’s say we work on an image uploader. As always, we can select and upload multiple files. And we have a few requirements which we have to do before we upload an image.

Display an image immediately — we haven’t had a URL yet. Reduce image size. Something like 8000x8000px to 1200x1200px. Compress an image.

We don’t need a web server for any of these tasks. You can check the demo: photomaker.io

File API. Step by step.

While The Native File System API is still under an experimental flag, the only way to access local files now is to use <input /> :

Access files in JavaScript: FileList object.

The <input type=’file’ /> returns FileList object. It’s an array-like object, similar to NodeList. If you want to use array methods like slice or filter , we can convert it into a normal array:

Access a single file: File object:

This is how it looks like in the console:

Question: how to display an image on the page if we don’t have a URL yet?

Option 1: FileReader API. It asynchronously reads the contents of files:

In the example above, the FileReader instance reads file as a dataURL, so we can embed the content in our HTML page.

Problem with dataURL — it might be huge. Here is what will be inside our HTML page:

It wasn’t really developed to process huge files. In fact, the goal was quite the opposite — inline small files (decorative images in CSS) and reduce the number of network requests.

Option 2: URL.createObjectURL()

The URL looks like: blob:null/4cca3809–3542–4119-a043–9862a71e5610 . You might be surprised, but support for this method is quite good:

Why not use it!

File is a special kind of Blob object:

It stands for “Binary Large Object” A Blob object keeps immutable, raw data. It can be read as text or binary data (images for example).

We often don’t create a Blob object directly, but can use it as a method:

We get used to seeing await res.json() . But Fetch API also provides methods for reading not only JSON object or Text, but binary data as well.

The next part of the equation: Web Workers.

Here is what developers heard about web-workers:

worker.js will be executed in another thread No access to DOM UI thread communicates with a worker using postMessage API.

Another way to create.

Do we actually need another file for our Worker? An extra file needs an extra webpack/gulp setup, or what if you develop a npm-package and want to ship only one file? It turns out, we don’t need an another file an all for web-workers.

The Worker constructor accepts a URL, which as we already know, can be created using URL.createObjectURL . And in its turn, accepts a Blob object and this guy can accept text…

So, said that we can do this:

It’s quite unpractical to put JS code into a string. In order to avoid it, we can use script tag:

The browser won’t execute this code because of the type different from “text/javascript”.

That’s it!

If you have any questions or feedback, let me know in the comments down below or ping me on Twitter (@alex_permiakov). In part 2, we will cover ArrayBuffer — a place our Blob object stores data and how to effectively pass data into a web-worker.

If this was useful, please click the clap 👏 button down below a few times to show your support! ⬇⬇ 🙏🏼