🐛 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
@@ -11737,7 +11738,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 at {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements when the user instructs the browser that they wish to dismiss the current open dialog, or at input elements in the File state when the user does not change their selection. For {{HTMLElement("dialog")}} elements, The browser fires this event when the user presses the <kbd>Esc</kbd> key.
 
 This event does not bubble.
 
@@ -30,7 +30,7 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-### Live example
+### \<dialog> element
 
 #### HTML
 
@@ -80,7 +80,45 @@ closeButton.addEventListener("click", () => {
 
 #### Result
 
-{{ EmbedLiveSample('Live_example', '100%', '100px') }}
+{{ EmbedLiveSample('dialog_cancel', '100%', '100px') }}
+
+### \<input> element
+
+#### HTML
+
+```html
+<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 +130,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
+
+Event `cancel` is fired when the user does not change their selection.
+
+For example, the following code will log to console if the user closes the popup without selecting files:
+
+```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>