Let users retry the same photo in a JavaScript file picker

Select a photo, simulate a failed upload, and select the same photo again. If the input still holds that file, the browser can treat the second selection as a cancellation, so a change handler may never run.

For a JavaScript-managed queue, take a reference to the File before clearing the picker. In this example addPhotoToQueue is the application function that stores the file.

<label for="photo">Add a photo</label>
<input id="photo" type="file" accept="image/*">

const picker = document.querySelector("#photo");
picker.addEventListener("change", () => {
  const file = picker.files[0];
  if (!file) return;
  picker.value = "";
  addPhotoToQueue(file);
});

Show the filename from the queue once the picker resets. If the form submits directly to the server, keep the input populated so the browser can send the selected file with the form.

To check the queue, pick the same image twice and confirm both selections reach the handler. Then open the picker and dismiss it. The queued files should stay as they were.

This article was drafted with AI assistance and checked against the HTML Standard.