🐛 Add missing cancel event to <input type=file>

[FurryR]

Description

Add cancel event to <input type=file>.

Motivation

👎 People are using hacks (window.addEventListener('focus')) to detect cancellations of file dialogs.

An example from GoogleChromeLabs/browser-fs-access

However, in https://html.spec.whatwg.org/multipage/indices.html#event-cancel:

Fired at dialog elements when they are canceled by the user (e.g., by pressing the Escape key), or at input elements in the File state when the user does not change their selection

It helps a lot.

function select_file() {
  return new Promise((resolve, reject) => {
    const elem = document.createElement('input')
    elem.type = 'file'
    elem.addEventListener('cancel', () => {
      reject(new Error('Cancelled')) // hooray!
    })
    elem.addEventListener('change', () => {
      if (elem.files.length == 1) resolve(elem.files.item(0))
      else reject(new Error('Cancelled'))
    })
    elem.click()
  })
}

Additional details

Reference: https://html.spec.whatwg.org/multipage/indices.html#event-cancel

Related issues and pull requests

🔨 Fixes #22157.

[github-actions]

Preview URLs (7 pages)

• /en-US/docs/Web/API/Element
• /en-US/docs/Web/API/HTMLDialogElement/showModal
• /en-US/docs/Web/API/HTMLDialogElement
• /en-US/docs/Web/API/HTMLElement/cancel_event
• /en-US/docs/Web/Events
• /en-US/docs/Web/HTML/Element/dialog
• /en-US/docs/Web/HTML/Element/input/file

Flaws (9)

Note! 4 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTMLElement/cancel_event
Title: HTMLElement: cancel event
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.HTMLElement.cancel_event

---

URL: /en-US/docs/Web/API/Element
Title: Element
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/Element/getBoxQuads does not exist

---

URL: /en-US/docs/Web/Events
Title: Event reference
Flaw count: 7

• broken_links:
  • Can't resolve /en-US/docs/Web/API/Element/cancel_event
  • Can't resolve /en-US/docs/Web/API/SVGElement/abort_event
  • Can't resolve /en-US/docs/Web/API/SVGElement/resize_event
  • Can't resolve /en-US/docs/Web/API/SVGElement/scroll_event
  • Can't resolve /en-US/docs/Web/API/SVGElement/unload_event
  • and 2 more flaws omitted

(comment last updated: 2023-11-20 14:54:46)

[estelle]

Before adding a link to the cancel event in the technical summary, the page needs to be created. See my comment in the issue

[FurryR]

Before adding a link to the cancel event in the technical summary, the page needs to be created. See my comment in the issue

Sorry for replying so late, I will create the page later.

[estelle]

I made some suggested edits. I think we need to be clearer about the multiple ways the cancel event may be thrown.

[FurryR]

@estelle suggested changes are all merged. Don't mind the commit messages, I forgot that #1 means #1.

[estelle]

I find the behavior of reselecting the same files unexpected, so want to make sure that it's clear. I made two suggestions to emphasize that. I am not sure if my suggestions are overkill.

also, when you're ready for a re-review, click the little icon next to my name so that you see a small brown dot instead of the icon. This informs me that the PR is ready for re-review.

[estelle]

THank you!

[skyclouds2001]

I think instead of moving page from HTMLDialogElement: cancel to HTMLElement: cancel, it is better to create a page for HTMLInputElement: cancel, this is also the behavior of BCD