Give same-named image files separate batch IDs

Assign image-batch rows identifiers that do not depend on File.name being unique. MDN documents that name excludes the path. A name does not establish that two selected files are the same file.

Assign the row IDs when accepting the batch. Display the original filename separately.

function makeBatch(files, batchId) {
  return Array.from(files, (file, index) => ({
    id: `${batchId}:${index}`,
    file,
    displayName: file.name,
    status: "pending"
  }));
}

The caller must supply a batchId that is unique among batches retained by the application. The index distinguishes rows within that batch. It is not a content hash and does not deduplicate files.

Use the row ID to attach each result or error to its input. Reordering the visible list should not change the ID assigned when the row was created.

I work on Morphio, an image conversion project. The bookkeeping pattern here is a design suggestion. It does not describe the project's implementation.

Reference: MDN File.name