Alright, let's tackle these two upload requirements step by step—they’re all about managing file selection state across your inputs to avoid duplicates and keep selections isolated.

How it works #

To prevent the same file from being selected across your three inputs (only for the current upload batch, ignoring files already in your database), we’ll track unique identifiers of selected files. A combination of a file’s name, size, and lastModified properties creates a reliable unique key—this avoids false positives from files that share a name but have different content.

Implementation Code #

First, the HTML for your upload inputs:

<div class="upload-container">
  <div class="upload-field">
    <label>Warm Up:</label>
    <input type="file" id="warmUpInput" class="upload-input" />
  </div>
  <div class="upload-field">
    <label>Drill 1:</label>
    <input type="file" id="drill1Input" class="upload-input" />
  </div>
  <div class="upload-field">
    <label>Drill 2:</label>
    <input type="file" id="drill2Input" class="upload-input" />
  </div>
</div>
<div id="duplicateAlert" style="color: #dc2626; margin-top: 10px; display: none;"></div>

Then the JavaScript to handle validation and tracking:

// Track unique keys of files selected in the current batch
const selectedFileKeys = new Set();
// Map each input ID to its selected file's key (for easy replacement)
const inputToFileKey = new Map();

// Attach change listeners to all upload inputs
document.querySelectorAll('.upload-input').forEach(input => {
  input.addEventListener('change', handleFileSelect);
});

function handleFileSelect(e) {
  const input = e.target;
  const selectedFile = input.files?.[0];
  const alertElement = document.getElementById('duplicateAlert');

  // If user cleared the selection, clean up tracking data
  if (!selectedFile) {
    const oldKey = inputToFileKey.get(input.id);
    if (oldKey) {
      selectedFileKeys.delete(oldKey);
      inputToFileKey.delete(input.id);
    }
    alertElement.style.display = 'none';
    return;
  }

  // Create a unique key for the selected file
  const fileKey = `${selectedFile.name}-${selectedFile.size}-${selectedFile.lastModified}`;

  // Check if this file is already selected in another input
  if (selectedFileKeys.has(fileKey)) {
    alertElement.textContent = `Oops: ${selectedFile.name} is already chosen in another upload field.`;
    alertElement.style.display = 'block';
    // Clear the invalid selection from the current input
    input.value = '';
    return;
  }

  // If user replaced their selection in this input, remove the old file's key
  const oldKey = inputToFileKey.get(input.id);
  if (oldKey) {
    selectedFileKeys.delete(oldKey);
  }

  // Add the new file to our tracking systems
  selectedFileKeys.add(fileKey);
  inputToFileKey.set(input.id, fileKey);
  alertElement.style.display = 'none';
}

Key Notes #

• We don’t check against your database here because your requirement states existing database files are exempt—this logic only blocks duplicates in the current upload session. If you did need to validate against database records, you’d add an async API call before allowing the selection, but that’s unnecessary for your use case.
• The inputToFileKey map ensures if a user replaces their selection in one input, we remove the old file’s key from our tracking set to avoid false duplicates.

How it works #

File input fields (<input type="file">) have a read-only value property for security, so they won’t automatically display selections from other inputs. Our job is to enforce this isolation by:

1. Making sure each input only manages its own selected file.
2. Ensuring changes to one input don’t affect others.

Implementation Details #

The code above already handles this automatically:

• Each input’s change event only modifies its own state and our tracking sets—no other input’s value is ever updated.
• When a user clears a selection in one input, we only clean up that file’s data (not touch other inputs).

If you want to add visual feedback for each input’s selection (like showing the chosen file name), you can extend the code without sharing data across inputs:

// Add this inside the handleFileSelect function, after validating the file
const fileNameDisplay = document.getElementById(`${input.id}-filename`);
if (selectedFile) {
  fileNameDisplay.textContent = `Selected: ${selectedFile.name}`;
} else {
  fileNameDisplay.textContent = '';
}

Update your HTML to include these displays:

<div class="upload-field">
  <label>Warm Up:</label>
  <input type="file" id="warmUpInput" class="upload-input" />
  <span id="warmUpInput-filename" style="margin-left: 10px;"></span>
</div>
<div class="upload-field">
  <label>Drill 1:</label>
  <input type="file" id="drill1Input" class="upload-input" />
  <span id="drill1Input-filename" style="margin-left: 10px;"></span>
</div>
<div class="upload-field">
  <label>Drill 2:</label>
  <input type="file" id="drill2Input" class="upload-input" />
  <span id="drill2Input-filename" style="margin-left: 10px;"></span>
</div>

Framework Adaptation Note #

If you’re using React, Vue, or another framework, you’d translate this logic to use component state. For example, in React, you’d use a selectedFiles state object to track each input’s file, and a usedFileKeys Set to check for duplicates—same core logic, just adapted to your framework’s state management.

内容的提问来源于stack exchange，提问作者Drew Cordaño