How to Stop Duplicate Uploads: UI Locks, Logic Flags, and Best Practices

Why Repeated Clicks Are Dangerous

In modern web apps, clicking the "Upload" button usually triggers an asynchronous operation such as

fetch

or

XMLHttpRequest

that sends a

POST

request.

async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  console.log("开始上传...");
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
  console.log("上传完成！");
  return response.json();
}

const uploadButton = document.getElementById('upload-btn');
const fileInput = document.getElementById('file-input');

uploadButton.addEventListener('click', () => {
  if (fileInput.files.length > 0) {
    uploadFile(fileInput.files[0]);
  }
});

The code calls

uploadFile

every time the button is clicked, so five rapid clicks generate five independent upload requests.

Solution 1: Simple UI‑Level Lock (Disable Button)

Disable the button when the upload starts and re‑enable it when the async task finishes, providing clear visual feedback.

Implementation steps :

Set the button’s

disabled

attribute to

true

immediately after the click.

In the

finally

block of the async operation, set

disabled

back to

false

.

Wrap the upload logic in a

try...catch...finally

structure to guarantee the button is always restored.

Pros : Simple, intuitive for users.

Cons : If JavaScript execution is delayed by a few milliseconds, an extremely fast user might click twice before the button is disabled.

Solution 2: Logic‑Level Lock with a State Flag

Introduce a flag such as

isUploading

that lives outside the UI and acts as a logical lock.

Implementation steps :

Declare a variable

let isUploading = false;

(global or within a closure).

At the start of the click handler, check

isUploading

. If it is

true

, return early.

If it is

false

, set it to

true

and proceed with the upload.

In the

finally

block, reset

isUploading

to

false

and also re‑enable the button.

let isUploading = false; // state flag

uploadButton.addEventListener('click', async () => {
  // 1. Check flag
  if (isUploading) {
    console.log('已有任务在上传中，请勿重复点击。');
    return;
  }
  if (fileInput.files.length === 0) return;

  // 2. Set flag and disable UI
  isUploading = true;
  uploadButton.disabled = true;
  uploadButton.textContent = '上传中...';

  try {
    await uploadFile(fileInput.files[0]);
    alert('上传成功！');
  } catch (error) {
    console.error('上传失败:', error);
    alert('上传失败，请重试。');
  } finally {
    // 3. Reset flag and UI
    isUploading = false;
    uploadButton.disabled = false;
    uploadButton.textContent = '上传文件';
  }
});

Pros : Logically rigorous; works even if the UI lock fails.

Cons : Requires manual state management, but it is essential for critical operations.

Solution 3: Debounce and Throttle (Why They’re Not Ideal Here)

Debounce waits for a pause before executing, which delays the upload and hurts user expectation. Throttle limits execution to a fixed interval, but if the interval is shorter than the upload duration, multiple uploads can still occur. Therefore, a state‑flag approach is more precise for guaranteeing a single active upload.

Don’t Forget the Backend: The Final Defense

Frontend restrictions can be bypassed with developer tools or scripts. The backend must enforce its own safeguards, such as:

Idempotency : Use a unique request ID (Idempotency‑Key) to detect and discard duplicates.

Database constraints : Unique indexes on file names or hashes.

Distributed locks : Lock resources (e.g., user‑ID + file name) during processing.

Putting It All Together

Core logic : Use a state flag (

isUploading

) as a logical lock.

User feedback : Disable the button and update its label or icon while the task runs.

Robust code : Wrap the upload in

try...catch...finally

to always reset state and UI.

Security baseline : Implement backend validation; frontend checks alone are insufficient.

By layering these defenses, you can build an upload feature that is both user‑friendly and reliable, handling even the most frantic clickers gracefully.