Internalize DataTransfer.files example (#40316)

Josh-Cena · bsmth · github-actions[bot] · web-flow · commit 9d5666d2ea7b · 2025-07-12T00:09:14.000+08:00
* Internalize DataTransfer.files example

* Remove more

* Apply suggestions from code review

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;

* Update files/en-us/web/api/datatransfer/files/index.md

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

* Update files/en-us/web/api/datatransfer/files/index.md

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;

---------

Co-authored-by: Brian Smith &lt;brian@smith.berlin&gt;
Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
diff --git a/files/en-us/web/api/datatransfer/files/index.md b/files/en-us/web/api/datatransfer/files/index.md
@@ -17,15 +17,56 @@ This feature can be used to drag files from a user's desktop to the browser.
 
 ## Value
 
-A {{domxref("FileList","list")}} of the files in a drag operation, one list item for
+A {{domxref("FileList")}} of the files in a drag operation, one list item for
 each file in the operation. If the drag operation had no files, the list is empty.
 
 ## Examples
 
-There are two live examples of this interface:
+### Reading the files list
 
-- Firefox only: <https://jsfiddle.net/9C2EF/>
-- All browsers: [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output)
+This example creates a basic area that you can drop files into and displays some metadata.
+
+```html
+<pre id="output">Drop files here from your file system.</pre>
+```
+
+```css
+#output {
+  min-height: 200px;
+  border: 1px solid black;
+  padding: 1em;
+}
+```
+
+```js
+const output = document.getElementById("output");
+
+function log(text) {
+  output.innerText += text;
+}
+
+output.addEventListener("dragenter", (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+  output.textContent = "";
+});
+output.addEventListener("dragover", (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+});
+output.addEventListener("drop", (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+  const files = event.dataTransfer.files;
+  log(`File Count: ${files.length}\n`);
+
+  for (const file of files) {
+    log(`  File: ${file}, ${file.name}, ${file.size} bytes\n`);
+  }
+});
+```
+
+{{EmbedLiveSample("reading_the_files_list", "", "300")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/html_drag_and_drop_api/index.md b/files/en-us/web/api/html_drag_and_drop_api/index.md
@@ -228,8 +228,8 @@ A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTran
 
 - [Copying and moving elements with the `DataTransfer` interface](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html)
 - [Copying and moving elements with the `DataTransferListItem` interface](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html)
-- Dragging and dropping files (Firefox only): <https://jsfiddle.net/9C2EF/>
-- Dragging and dropping files (All browsers): [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output)
+
+Reference pages for each interface also have individual examples.
 
 ## Specifications
 
