How to compare two blobs in JavaScript?

Question

I load two blob files in JavaScript using the code below.

I want to compare them to see if they are precisely the same.

(blob1 === blob2) is returning false, even though the reported size of each blob is 574 bytes. What am I doing wrong?

  getHTTPAsBlob(url, callback) {
    let cacheBust = Math.random().toString()
    url = url + '?&cachebust=' + cacheBust
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) {
      if (xhr.status == 200) {
        // get binary data as a response
        let fileData = this.response;
        let contentType = xhr.getResponseHeader("content-type")
        var reader = new FileReader()
        reader.onload = (e) => {
          console.log(reader.result)
          console.log(fileData)
          callback(null, {
              Body: reader.result,
              Blob: fileData,
              ContentType: contentType,
              Etag: null,
              LastModified: null,
            })
        }
        reader.readAsText(fileData)
        } else {
        callback(xhr)
      }
      }
      xhr.send();
    }

I think you have to read the "blob" if you want to compare its contents (using FileReader). Wouldn't it be easier to set responseType to "arraybuffer", especiallly if they are so small? — Thilo, Aug 14 '16 at 09:46
If you look at my code you'll see it uses filereader to get the text out of the blob but that is beside the point, reading should not be needed for comparing two blobs. — Duke Dougal, Aug 14 '16 at 12:20
@DukeDugal: Why would reading not be needed to compare two blobs? How else do you want to compare them, if not by their contents? — Thilo, Aug 14 '16 at 23:22

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You must use a FileReader to compare them

The documentation for FileReader is on MDN. Take a look at methods to choose what's best for your data.

A useless way of comparing two blobs is looking at their size. Although two blobs of the same size will return true no matter their content.

Example

new Blob([Math.random()]).size == new Blob([Math.random()]).size // true.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 03 '17 at 17:43

MrViK

106
1
8

score 0 · Answer 2 · answered Jul 24 '17 at 21:59

Unfortunately, this is a case of comparing two completely independent pointers that reference comparable content. To see how this might work for simpler content, try the following in the javascript console:

new Number(5) == new Number(5)

Returns false. Frustrating that 5 as an object does not equal an object whose value is 5. But at least this puts Blob into context.

I'm running into this same problem, and agree with the previous suggestion that FileReader is the only option.

score 0 · Answer 3 · answered Jun 02 '20 at 05:34

0

I think "blob compare" plug-in will be help you. It can compare blob size,type and so on. https://www.npmjs.com/package/blob-compare

but I don't know if this plug-in is the perfect way.

answered Jun 02 '20 at 05:34

김광훈

1
4

bmaupin · Answer 4 · 2023-03-03T19:25:36.697

0

The question was asked in context of JavaScript in the browser, but in case anyone wants to compare blobs in Node.js:

const areBlobsEqual = async (blob1, blob2) => {
  return !Buffer.from(await blob1.arrayBuffer()).compare(
    Buffer.from(await blob2.arrayBuffer())
  );
};

edited Mar 03 '23 at 19:25

answered Mar 02 '23 at 20:13

bmaupin

14,427
5
89
94

How to compare two blobs in JavaScript?

4 Answers4

You must use a FileReader to compare them

Example