clipboard-file-manual.html (2700B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Clipboard: DataTransfer File manual test</title> 4 <link rel="help" href="https://w3c.github.io/clipboard-apis/#to-fire-a-clipboard-event"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #pastewrapper { 9 display: block; 10 width: 400px; 11 height: 200px; 12 position: relative; 13 padding: 50px 0 0 100px; 14 } 15 #pastezone { 16 display: block; 17 border: 1px solid black; 18 width: 200px; 19 height: 100px; 20 } 21 </style> 22 <p> 23 Please download <a download href="resources/copied-file.txt">this file</a>, 24 and copy and paste it into the box below. 25 </p> 26 27 <div id="pastewrapper"> 28 <div id="pastezone"> 29 Paste Here 30 </div> 31 </div> 32 33 <script> 34 'use strict'; 35 36 const pasteWrapper = document.querySelector('#pastewrapper'); 37 const pasteZone = document.querySelector('#pastezone'); 38 39 const pastePromise = new Promise((resolve, reject) => { 40 pasteZone.onpaste = event => { 41 event.preventDefault(); 42 43 // Copy the information out of the DataTransfer instance before it is 44 // neutered when the event handler exits. 45 const dataTransfer = event.clipboardData; 46 const items = Array.from(dataTransfer.items).map(item => { 47 return {kind: item.kind, type: item.type, file: item.getAsFile() }; 48 }); 49 resolve({ types: dataTransfer.types, files: dataTransfer.files, items }); 50 }; 51 }); 52 53 promise_test(async () => { 54 const dataTransfer = await pastePromise; 55 assert_true(dataTransfer.types.includes('Files')); 56 }, 'DataTransfer.types in paste file'); 57 58 promise_test(async () => { 59 const dataTransfer = await pastePromise; 60 assert_equals( 61 dataTransfer.files.length, 1, 62 'DataTransfer.files should have one element'); 63 const file = dataTransfer.files[0]; 64 assert_true( 65 file instanceof File, 66 'DataTransfer.files[0] should be a File instance'); 67 assert_equals(file.name, 'copied-file.txt'); 68 assert_equals(file.type, 'text/plain'); 69 assert_equals(file.size, 21); 70 assert_equals(await file.text(), 'copied-file-contents\n'); 71 }, 'DataTransfer.files in paste'); 72 73 promise_test(async () => { 74 const dataTransfer = await pastePromise; 75 const items = dataTransfer.items.filter(i => i.kind === 'file'); 76 assert_equals(items.length, 1, 77 'DataTransfer.items[kind="file"] should have 1 element'); 78 const item = items[0]; 79 assert_true( 80 item.file instanceof File, 81 'DataTransfer.items[0] should be a File instance'); 82 assert_equals(item.file.name, 'copied-file.txt'); 83 assert_equals(item.file.type, 'text/plain'); 84 assert_equals(item.file.size, 21); 85 assert_equals(await item.file.text(), 'copied-file-contents\n'); 86 }, 'DataTransfer.items in paste'); 87 </script>