I have a drop zone for files in a JS application. I want to filter out duplicate files being dropped into the application, but I can't seem to find a proper way to pare two File objects pointing to the same file. All I could find is parison by "name + file size + modified date" bo, but it's not 100% proof, since the path is not revealed in the name attribute.

Is there a way to do it that I just missed?

I have a drop zone for files in a JS application. I want to filter out duplicate files being dropped into the application, but I can't seem to find a proper way to pare two File objects pointing to the same file. All I could find is parison by "name + file size + modified date" bo, but it's not 100% proof, since the path is not revealed in the name attribute.

Is there a way to do it that I just missed?

• javascript
• file

2 Answers 2

I know that the answer es 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 pare the files by content. But this will be very expensive.

2023, the solution I found for paring 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-pare (You can see how it works: https://github./liqueurdetoile/blob-pare/blob/master/src/lib.js)

How your code will look like:

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

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