guest271314/SetFileList.html

## SetFileList.html
<!DOCTYPE html>
<!-- guest271314 11-12-2017 -->
<!-- see https://stackoverflow.com/questions/47119426 -->
<html>

<head>
</head>

<body>
  <script>
    const input = document.createElement("input");
    const label = document.createElement("label");
    const text = document.createTextNode("click to set files\n");
    const form = document.createElement("form");
    const data = [
      new File(["a"], "a.txt"), new File(["b"], "b.txt")
    ];
    // https://github.com/w3c/clipboard-apis/issues/33
    class _DataTransfer {
      constructor() {
        return new ClipboardEvent("").clipboardData || new DataTransfer();
      }
    }

    input.type = "file";
    input.name = "files[]";
    input.multiple = true;
    input.id = "files";

    text.textContent = text.textContent.concat(data.map(({
      name
    }) => name).join(", "), "\n");

    label.appendChild(text);
    form.appendChild(label);
    form.appendChild(input);
    document.body.appendChild(form);
    // https://github.com/whatwg/html/issues/3222
    // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
    label.onclick = e => {

      const dt = new _DataTransfer();

      for (let file of data) {
        dt.items.add(file)
      }

      if (dt.files.length) {
        input.files = dt.files; // set `FileList` of `dt.files`: `DataTransfer.files` to `input.files`
      }

      for (const file of input.files) {
        console.log(file); // `File` objects originally set at `data`, set at `input.files`
      }

      const fd = new FormData(form); // pass `form` to `fd`: `FormData`

      for (const [key, prop] of fd) {
        console.log(key, prop); // `File` objects set at `fd`
      }

    }
    // not dispatched at Firefox 57 when set using `input.files = dt.files`
    input.onchange = e => {
      console.log(e, input.files);
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<!-- guest271314 11-12-2017 -->
	<!-- see https://stackoverflow.com/questions/47119426 -->
	<html>

	<head>
	</head>

	<body>
	<script>
	const input = document.createElement("input");
	const label = document.createElement("label");
	const text = document.createTextNode("click to set files\n");
	const form = document.createElement("form");
	const data = [
	new File(["a"], "a.txt"), new File(["b"], "b.txt")
	];
	// https://github.com/w3c/clipboard-apis/issues/33
	class _DataTransfer {
	constructor() {
	return new ClipboardEvent("").clipboardData \|\| new DataTransfer();
	}
	}

	input.type = "file";
	input.name = "files[]";
	input.multiple = true;
	input.id = "files";

	text.textContent = text.textContent.concat(data.map(({
	name
	}) => name).join(", "), "\n");

	label.appendChild(text);
	form.appendChild(label);
	form.appendChild(input);
	document.body.appendChild(form);
	// https://github.com/whatwg/html/issues/3222
	// https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
	label.onclick = e => {

	const dt = new _DataTransfer();

	for (let file of data) {
	dt.items.add(file)
	}

	if (dt.files.length) {
	input.files = dt.files; // set `FileList` of `dt.files`: `DataTransfer.files` to `input.files`
	}

	for (const file of input.files) {
	console.log(file); // `File` objects originally set at `data`, set at `input.files`
	}

	const fd = new FormData(form); // pass `form` to `fd`: `FormData`

	for (const [key, prop] of fd) {
	console.log(key, prop); // `File` objects set at `fd`
	}

	}
	// not dispatched at Firefox 57 when set using `input.files = dt.files`
	input.onchange = e => {
	console.log(e, input.files);
	}
	</script>
	</body>

	</html>