Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files below:

DataTransfer: files property - Web APIs

Baseline Widely available

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.

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.

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`);
  }
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4