file-to-system.html (1883B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Dragging a file to the system</title> 5 <style type="text/css"> 6 span { display: inline-block; height: 100px; width: 100px; background: orange; } 7 </style> 8 <script type="text/javascript"> 9 window.onload = function () { 10 var drag = document.getElementsByTagName('span')[0]; 11 drag.ondragstart = function (e) { 12 e.dataTransfer.setData('text','PASS'); 13 e.dataTransfer.effectAllowed = 'copy'; 14 var filein = document.getElementsByTagName('input')[0]; 15 if( !filein.files ) { 16 document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.'; 17 return; 18 } 19 if( !filein.files[0] ) { 20 document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.'; 21 return; 22 } 23 var thefile = filein.files[0]; 24 try { 25 e.dataTransfer.items.add(thefile); 26 } catch(err) { 27 document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file'; 28 e.preventDefault(); 29 return; 30 } 31 if( e.dataTransfer.files.length != 1 ) { 32 document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store'; 33 e.preventDefault(); 34 } 35 }; 36 }; 37 </script> 38 </head> 39 <body> 40 <div>This test only applies to platforms where dropping a file onto a folder in the system's file manager copies/moves the file to that folder.</div> 41 <ol> 42 <li>Open an empty folder in your system's file manager.</li> 43 <li>Select a non-empty file on your computer using the following input: <input type="file"></li> 44 <li>Drag the orange square onto the folder in your system's file manager, and release it:<br><span draggable="true"></span></li> 45 <li>Pass if the file is copied to the folder.</li> 46 </ol> 47 <p></p> 48 <noscript><p>Enable JavaScript and reload</p></noscript> 49 </body> 50 </html>