DataTransfer: files property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The files read-only property of DataTransfer objects is a list of the files in the drag operation. If the operation includes no files, the list is empty.
This feature can be used to drag files from a user's desktop to the browser.
Note:
The files property of DataTransfer objects can only be accessed from within the drop and paste events. For all other events, the files property will be empty — because its underlying data store will be in a protected mode.
Value
A 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
Reading the files list
This example creates a basic area that you can drop files into and displays some metadata.
<pre id="output">Drop files here from your file system.</pre>
#output {
min-height: 200px;
border: 1px solid black;
padding: 1em;
}
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`);
}
});
Specifications
| Specification |
|---|
| HTML # dom-datatransfer-files-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
files
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support