:bug: Add missing `cancel` event to `<input type=file>` by FurryR · Pull Request #29639 · mdn/content

FurryR · 2023-10-14T08:10:53Z

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.

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

files/en-us/web/html/element/input/file/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions · 2023-10-16T17:38:15Z

Preview URLs (7 pages)

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 · 2023-10-16T17:53:40Z

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 · 2023-11-04T04:02:26Z

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.

files/en-us/web/api/htmlelement/cancel_event/index.md

estelle

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

files/en-us/web/api/htmlelement/cancel_event/index.md

files/en-us/web/html/element/input/file/index.md

files/en-us/web/api/htmlelement/cancel_event/index.md

Co-authored-by: Estelle Weyl <[email protected]>

FurryR · 2023-11-11T08:30:55Z

@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.

files/en-us/web/api/htmlelement/cancel_event/index.md

files/en-us/web/html/element/input/file/index.md

Co-authored-by: Estelle Weyl <[email protected]>

files/en-us/web/html/element/input/file/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

estelle

THank you!

skyclouds2001 · 2024-01-27T17:06:04Z

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

…29639)" This reverts commit 0900a56.

* Revert ":bug: Add missing `cancel` event to `<input type=file>` (#29639)" This reverts commit 0900a56. * update & finish docs * Update files/en-us/web/api/htmlinputelement/cancel_event/index.md Co-authored-by: Joshua Chen <[email protected]> --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Joshua Chen <[email protected]>

FurryR requested a review from a team as a code owner October 14, 2023 08:10

FurryR requested review from estelle and removed request for a team October 14, 2023 08:10

github-actions bot added the Content:HTML Hypertext Markup Language docs label Oct 14, 2023

github-actions bot reviewed Oct 14, 2023

View reviewed changes

files/en-us/web/html/element/input/file/index.md Outdated Show resolved Hide resolved

📝 Make linter happy

e66ed1f

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

FurryR marked this pull request as draft October 14, 2023 08:16

FurryR added 3 commits October 14, 2023 16:33

📝 Add an example

b1e47c1

📝 highlight

0379c00

🐛 typo

6cbda20

FurryR marked this pull request as ready for review October 14, 2023 08:36

estelle assigned estelle and FurryR Oct 17, 2023

Merge branch 'mdn:main' into patch-1

0bddbc0

FurryR marked this pull request as draft November 4, 2023 04:03

📝 Move cancel_event to HTMLElement

45edb60

github-actions bot added the Content:WebAPI Web API docs label Nov 4, 2023

🔥 Removed original HTMLDialogElement/cancel_event

7785561

github-actions bot reviewed Nov 4, 2023

View reviewed changes

files/en-us/web/api/htmlelement/cancel_event/index.md Outdated Show resolved Hide resolved

files/en-us/web/api/htmlelement/cancel_event/index.md Outdated Show resolved Hide resolved

📝 Update all links

3fae541

github-actions bot added the Content:Events Events docs (retired, now use Content:WebAPI instead) label Nov 4, 2023

FurryR marked this pull request as ready for review November 4, 2023 04:56

FurryR requested review from a team as code owners November 4, 2023 04:56

FurryR requested review from wbamberg and removed request for a team November 4, 2023 04:56

FurryR and others added 2 commits November 4, 2023 12:59

🐛 Sort redirects

da64968

Merge branch 'main' into patch-1

0145da5

estelle reviewed Nov 9, 2023

View reviewed changes

FurryR and others added 5 commits November 11, 2023 16:24

Merge branch 'main' into patch-1

1294131

chore: Merge suggestion mdn#1

25e4b66

Co-authored-by: Estelle Weyl <[email protected]>

chore: Merge suggestion mdn#2

19a0d57

Co-authored-by: Estelle Weyl <[email protected]>

chore: Merge suggestion mdn#3

e1aba98

Co-authored-by: Estelle Weyl <[email protected]>

chore: Merge suggestion mdn#4

0c8fa15

Co-authored-by: Estelle Weyl <[email protected]>

estelle reviewed Nov 14, 2023

View reviewed changes

files/en-us/web/api/htmlelement/cancel_event/index.md Show resolved Hide resolved

files/en-us/web/html/element/input/file/index.md Outdated Show resolved Hide resolved

teoli2003 removed request for a team and wbamberg November 18, 2023 08:57

FurryR and others added 2 commits November 19, 2023 09:10

chore: Merge suggestion (5)

680b219

Co-authored-by: Estelle Weyl <[email protected]>

chore: Merge suggestion (6)

f91cb70

Co-authored-by: Estelle Weyl <[email protected]>

This comment was marked as spam.

Sign in to view

github-actions bot reviewed Nov 19, 2023

View reviewed changes

files/en-us/web/html/element/input/file/index.md Outdated Show resolved Hide resolved

Update files/en-us/web/html/element/input/file/index.md

111e2de

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

estelle approved these changes Nov 20, 2023

View reviewed changes

estelle merged commit 0900a56 into mdn:main Nov 20, 2023

mathewhodson mentioned this pull request Jan 26, 2024

Fix redirect for old cancel_event page #31948

Merged

skyclouds2001 mentioned this pull request Jan 30, 2024

No information about "cancel" event on HTMLInputElement page #31014

Closed

FurryR deleted the patch-1 branch September 27, 2024 13:00

skyclouds2001 added a commit to skyclouds2001/content that referenced this pull request Oct 22, 2024

Revert ":bug: Add missing cancel event to <input type=file> (mdn#…

21aa4bb

…29639)" This reverts commit 0900a56.

skyclouds2001 mentioned this pull request Oct 22, 2024

Revert #29639 & create page for HTMLInputElement.cancel_event #36439

Merged

github-actions bot locked as resolved and limited conversation to collaborators Oct 1, 2025

Comments

Conversation

FurryR commented Oct 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

Uh oh!

github-actions bot commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

estelle commented Oct 16, 2023

Uh oh!

FurryR commented Nov 4, 2023

Uh oh!

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FurryR commented Nov 11, 2023

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as spam.

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

skyclouds2001 commented Jan 27, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FurryR commented Oct 14, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading