data-transfer-items-file-dragout.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p><b>BUG ID: 76367</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=76367">Bugzilla bug </a> Add DataTransferItems support for drag-and-drop'ed files and texts</p>
  5. <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> <br>
  6. 1. Open the <a href="resources">$(WebKitRoot)/ManualTests/resources</a> folder in your native file browser.<br>
  7. 2. Drag and drop a file into the 'Drop files here' area below.<br>
  8. 3. Drag out <a href="#" id="dragout" draggable="true">this link</a> out of the browser window into a different folder in the native file browser).
  9. </p>
  10. <div id="destination" style="min-height:100px; margin: 5px; border: solid 1px black">Drop files here </div>
  11. <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
  12. The same file you dropped in the step 2 should be dragged out to the folder in the step 3. The file should have the same content and the same file name as the dropped file. (NOTE: this does not work for multiple files yet.)
  13. </p>
  14. <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
  15. Nothing happens or a different file from the dropped one (likely a text file with the page title) is dragged out.
  16. </p>
  17. <p id="console"></p>
  18. <script>
  19. function log(text)
  20. {
  21. var console = document.getElementById('console');
  22. console.appendChild(document.createTextNode(text));
  23. console.appendChild(document.createElement('br'));
  24. }
  25. function test(expect, actual)
  26. {
  27. log((expect == actual ? 'PASS' : 'FAIL') + ': "' + expect + '" == "' + actual + '"');
  28. }
  29. var destination = document.getElementById('destination');
  30. destination.addEventListener('dragover', handleDragOver, false);
  31. destination.addEventListener('drop', handleDrop, false);
  32. function handleDragOver(e)
  33. {
  34. e.stopPropagation();
  35. e.preventDefault();
  36. }
  37. function handleDrop(e)
  38. {
  39. e.stopPropagation();
  40. e.preventDefault();
  41. log('Verifying contents of DataTransferItems...');
  42. var items = e.dataTransfer.items;
  43. var files = [];
  44. test(1, items.length);
  45. for (var i = 0; i < items.length; ++i) {
  46. test('file', items[i].kind);
  47. var file = items[i].getAsFile();
  48. log('Dragged files: ' + file.name);
  49. log('Dragged file size: ' + file.size);
  50. files.push(file);
  51. }
  52. // Setting up dragout items.
  53. log('Setting up dragging out with the dropped items...');
  54. var source = document.getElementById('dragout');
  55. source.addEventListener('dragstart', function(e) {
  56. for (var i = 0; i < files.length; ++i) {
  57. log('Dragging out ' + files[i].name);
  58. e.dataTransfer.items.add(files[i]);
  59. }
  60. }, false);
  61. log('Please dragout the link (noted in the step 3) and see if the same file you dropped in in the step 2 is properly drag out.');
  62. }
  63. </script>
  64. </body>
  65. </html>