clipboard-apis/clipboard-file-manual.html

<!doctype html>
<meta charset="utf-8">
<title>Clipboard: DataTransfer File manual test</title>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#to-fire-a-clipboard-event">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#pastewrapper {
  display: block;
  width: 400px;
  height: 200px;
  position: relative;
  padding: 50px 0 0 100px;
}
#pastezone {
  display: block;
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
</style>
<p>
  Please download <a download href="resources/copied-file.txt">this file</a>,
  and copy and paste it into the box below.
</p>

<div id="pastewrapper">
  <div id="pastezone">
    Paste Here
  </div>
</div>

<script>
'use strict';

const pasteWrapper = document.querySelector('#pastewrapper');
const pasteZone = document.querySelector('#pastezone');

const pastePromise = new Promise((resolve, reject) => {
  pasteZone.onpaste = event => {
    event.preventDefault();

    // Copy the information out of the DataTransfer instance before it is
    // neutered when the event handler exits.
    const dataTransfer = event.clipboardData;
    const items = Array.from(dataTransfer.items).map(item => {
      return {kind: item.kind, type: item.type, file: item.getAsFile() };
    });
    resolve({ types: dataTransfer.types, files: dataTransfer.files, items });
  };
});

promise_test(async () => {
  const dataTransfer = await pastePromise;
  assert_true(dataTransfer.types.includes('Files'));
}, 'DataTransfer.types in paste file');

promise_test(async () => {
  const dataTransfer = await pastePromise;
  assert_equals(
      dataTransfer.files.length, 1,
      'DataTransfer.files should have one element');
  const file = dataTransfer.files[0];
  assert_true(
      file instanceof File,
      'DataTransfer.files[0] should be a File instance');
  assert_equals(file.name, 'copied-file.txt');
  assert_equals(file.type, 'text/plain');
  assert_equals(file.size, 21);
  assert_equals(await file.text(), 'copied-file-contents\n');
}, 'DataTransfer.files in paste');

promise_test(async () => {
  const dataTransfer = await pastePromise;
  const items = dataTransfer.items.filter(i => i.kind === 'file');
  assert_equals(items.length, 1,
      'DataTransfer.items[kind="file"] should have 1 element');
  const item = items[0];
  assert_true(
      item.file instanceof File,
      'DataTransfer.items[0] should be a File instance');
  assert_equals(item.file.name, 'copied-file.txt');
  assert_equals(item.file.type, 'text/plain');
  assert_equals(item.file.size, 21);
  assert_equals(await item.file.text(), 'copied-file-contents\n');
}, 'DataTransfer.items in paste');
</script>