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

files/en-us/_redirects.txt

@@ -8097,7 +8097,7 @@
 /en-US/docs/Web/API/Element/MozMousePixelScroll	/en-US/docs/Web/API/Element/MozMousePixelScroll_event
 /en-US/docs/Web/API/Element/accessKey	/en-US/docs/Web/API/HTMLElement/accessKey
 /en-US/docs/Web/API/Element/attachInternals	/en-US/docs/Web/API/HTMLElement/attachInternals
-/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/API/Element/contentvisibilityautostatechanged_event	/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event
 /en-US/docs/Web/API/Element/createShadowRoot	/en-US/docs/Web/API/Element/shadowRoot
 /en-US/docs/Web/API/Element/error_event	/en-US/docs/Web/API/HTMLElement/error_event
@@ -8412,6 +8412,7 @@
 /en-US/docs/Web/API/HTMLContentElement.select	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/getDistributedNodes	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/select	/en-US/docs/Web/API/HTMLSlotElement
+/en-US/docs/Web/API/HTMLDialogElement/cancel	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/API/HTMLDialogElement/close()	/en-US/docs/Web/API/HTMLDialogElement/close
 /en-US/docs/Web/API/HTMLDialogElement/returnValue()	/en-US/docs/Web/API/HTMLDialogElement/returnValue
 /en-US/docs/Web/API/HTMLDialogElement/show()	/en-US/docs/Web/API/HTMLDialogElement/show
@@ -11742,7 +11743,7 @@
 /en-US/docs/Web/Events/blur	/en-US/docs/Web/API/Element/blur_event
 /en-US/docs/Web/Events/boundary	/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event
 /en-US/docs/Web/Events/bufferedamountlow	/en-US/docs/Web/API/RTCDataChannel/bufferedamountlow_event
-/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/Events/canplay	/en-US/docs/Web/API/HTMLMediaElement/canplay_event
 /en-US/docs/Web/Events/canplaythrough	/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
 /en-US/docs/Web/Events/change	/en-US/docs/Web/API/HTMLElement/change_event

files/en-us/_wikihistory.json

@@ -37813,16 +37813,17 @@
       "dhodder"
     ]
   },
-  "Web/API/HTMLDialogElement/cancel_event": {
-    "modified": "2020-10-15T21:43:04.572Z",
+  "Web/API/HTMLElement/cancel_event": {
+    "modified": "2023-11-04T04:52:37.782Z",
     "contributors": [
       "mfuji09",
       "fscholz",
       "mfluehr",
       "sideshowbarker",
       "fgwang",
       "rolfedh",
-      "cvrebert"
+      "cvrebert",
+      "FurryR"
     ]
   },
   "Web/API/HTMLDialogElement/close": {

files/en-us/web/api/element/index.md

@@ -288,7 +288,7 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 
 - {{domxref("Element/beforematch_event", "beforematch")}} {{Experimental_Inline}}
   - : Fires on an element that is in the [_hidden until found_](/en-US/docs/Web/HTML/Global_attributes/hidden) state, when the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+- {{domxref("HTMLElement/cancel_event", "cancel")}}
   - : Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the currently open modal dialog. The browser fires this event when the user presses the <kbd>Esc</kbd> key to close the modal dialog.
 - {{domxref("Element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} {{Experimental_Inline}}
   - : Fires on any element with {{cssxref("content-visibility", "content-visibility: auto")}} set on it when it starts or stops being [relevant to the user](/en-US/docs/Web/CSS/CSS_containment#relevant_to_the_user) and [skipping its contents](/en-US/docs/Web/CSS/CSS_containment#skips_its_contents).

files/en-us/web/api/htmldialogelement/index.md

@@ -33,7 +33,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._
 
 ## Events
 
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+- {{domxref("HTMLElement/cancel_event", "cancel")}}
   - : Fired when the user dismisses the current open dialog with the escape key.
 - {{domxref("HTMLDialogElement/close_event", "close")}}
   - : Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Element/form#method).
@@ -42,7 +42,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
 
 #### HTML
 

files/en-us/web/api/htmldialogelement/showmodal/index.md

@@ -37,7 +37,7 @@ None ({{jsxref("undefined")}}).
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
 
 #### HTML
 

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

@@ -1,14 +1,14 @@
 ---
-title: "HTMLDialogElement: cancel event"
+title: "HTMLElement: cancel event"
 short-title: cancel
-slug: Web/API/HTMLDialogElement/cancel_event
+slug: Web/API/HTMLElement/cancel_event
 page-type: web-api-event
-browser-compat: api.HTMLDialogElement.cancel_event
+browser-compat: api.HTMLElement.cancel_event
 ---
 
 {{APIRef}}
 
-The **`cancel`** event fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the <kbd>Esc</kbd> key.
+The **`cancel`** event is fired by {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements. The event is fired when the user cancels the currently open dialog by closing it with the <kbd>Esc</kbd> key. It is also fired by the [file input](/en-US/docs/Web/HTML/Element/input/file) when the user cancels the file picker dialog via the <kbd>Esc</kbd> key or the cancel button and when the user re-selects the same files that were previously selected.
 
 This event does not bubble.
 
@@ -30,7 +30,7 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-### Live example
+### \<dialog> element
 
 #### HTML
 
@@ -80,7 +80,46 @@ closeButton.addEventListener("click", () => {
 
 #### Result
 
-{{ EmbedLiveSample('Live_example', '100%', '100px') }}
+{{ EmbedLiveSample('dialog_cancel', '100%', '100px') }}
+
+### \<input> element
+
+#### HTML
+
+```html
+<label for="file">Select or file. Or don't.</label>
+<input type="file" id="file" name="file" />
+
+<div id="result"></div>
+```
+
+```css hidden
+div {
+  margin-bottom: 10px;
+}
+```
+
+#### JavaScript
+
+```js
+const elem = document.getElementById("file");
+
+const result = document.getElementById("result");
+
+elem.addEventListener("cancel", () => {
+  result.textContent = "Cancelled.";
+});
+
+elem.addEventListener("change", () => {
+  if (elem.files.length == 1) {
+    result.textContent = "File Selected.";
+  }
+});
+```
+
+#### Result
+
+{{ EmbedLiveSample('input_cancel', '100%', '100px') }}
 
 ## Specifications
 
@@ -92,5 +131,6 @@ closeButton.addEventListener("click", () => {
 
 ## See also
 
+- HTML {{HTMLElement("input")}} element
 - HTML {{HTMLElement("dialog")}} element
 - {{domxref("HTMLDialogElement/close_event", "close")}}

files/en-us/web/events/index.md

@@ -979,6 +979,7 @@ This section lists events that have _their own_ reference pages on MDN. If you a
   - [webkitmouseforceup event](/en-US/docs/Web/API/Element/webkitmouseforceup_event)
   - [webkitmouseforcewillbegin event](/en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event)
   - [wheel event](/en-US/docs/Web/API/Element/wheel_event)
+  - [cancel event](/en-US/docs/Web/API/Element/cancel_event)
 
 - {{DOMxRef("EventSource")}}
 
@@ -1007,7 +1008,6 @@ This section lists events that have _their own_ reference pages on MDN. If you a
 
 - {{DOMxRef("HTMLDialogElement")}}
 
-  - [cancel event](/en-US/docs/Web/API/HTMLDialogElement/cancel_event)
   - [close event](/en-US/docs/Web/API/HTMLDialogElement/close_event)
 
 - {{DOMxRef("HTMLElement")}}

files/en-us/web/html/element/dialog/index.md

@@ -271,7 +271,7 @@ The `<dialog>` element is exposed by browsers in a manner similar to custom dial
 
 - {{domxref("HTMLDialogElement")}} interface
 - {{domxref("HTMLDialogElement/close_event", "close")}} event
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event
+- {{domxref("HTMLElement/cancel_event", "cancel")}} event
 - {{domxref("HTMLDialogElement/open", "open")}} property of the `HTMLDialogElement` interface
 - [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) global attribute for HTML elements
 - {{CSSXref("::backdrop")}} CSS pseudo-element

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

@@ -170,6 +170,26 @@ The `accept` attribute doesn't validate the types of the selected files; it prov
 
 Because of this, you should make sure that the `accept` attribute is backed up by appropriate server-side validation.
 
+### Detecting cancellations
+
+The `cancel` event is fired when the user does not change their selection and when the file picker dialog gets closed, or canceled, via the "cancel" button or the <kbd>escape</kbd> key.
+
+For example, the following code will log to the console if the user closes the popup without selecting a file:
+
+```js
+const elem = document.createElement("input");
+elem.type = "file";
+elem.addEventListener("cancel", () => {
+  console.log("Cancelled.");
+});
+elem.addEventListener("change", () => {
+  if (elem.files.length == 1) {
+    console.log("File selected: ", elem.files[0]);
+  }
+});
+elem.click();
+```
+
 ### Notes
 
 1. You cannot set the value of a file picker from a script — doing something like the following has no effect:
@@ -396,8 +416,9 @@ The example looks like this; have a play:
     <tr>
       <td><strong>Events</strong></td>
       <td>
-        {{domxref("HTMLElement/change_event", "change")}} and
-        {{domxref("HTMLElement/input_event", "input")}}
+        {{domxref("HTMLElement/change_event", "change")}},
+        {{domxref("HTMLElement/input_event", "input")}} and
+        {{domxref("HTMLElement/cancel_event", "cancel")}}
       </td>
     </tr>
     <tr>