Comparing File objects in JavaScript

I know that the answer comes too late, but I was confronting with the same issue and maybe others too.

I doubt that there is a better method than the one that you're using. Indeed it's not 100% proof because you can have two files with the same name, size and last modified date, but they can sit in two separate folders and be different.

Using equality (===) between File objects is also failing if you have the same file chosen by two different <input type="file">.

I think another way will be in addition to what you've done to use FileReader to actually compare the files by content. But this will be very expensive.

2023, the solution I found for comparing 2 files in client-side: (correct me if there is a simpler solution)

Convert the File/Blob to ArrayBuffer using FileReader. Then perform byte-to-byte check on the buffer. However, these operations are async and very lengthy. You will have to create multiple utils to deal with the callbacks and Promises.

I end up just using this library: blob-compare (You can see how it works: https://github.com/liqueurdetoile/blob-compare/blob/master/src/lib.js)

How your code will look like:

// util
import blobCompare from "blob-compare";

export const isFileEqual = async (file1, file2) => {
  return new Promise((resolve, reject) => {
    blobCompare.isEqual(file1, file2).then((result) => {
      resolve(result); // boolean
    }).catch(() => resolve(false));
  });
};

// usage
const file1, file2; // typeof File
if (await isFileEqual(file1, file2)) {
  // do something
}

If you want to use this function in an Array.filter(), check this out: Filtering an array with a function that returns a promise