ManualTests/data-transfer-items-file-dragout.html

   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
   6 <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> <br>
   7 1. Open the <a href="resources">$(WebKitRoot)/ManualTests/resources</a> folder in your native file browser.<br>
   8 2. Drag and drop a file into the 'Drop files here' area below.<br>
   9 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).
  10 </p>
  11
  12 <div id="destination" style="min-height:100px; margin: 5px; border: solid 1px black">Drop files here </div>
  13
  14 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
  15 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.)
  16 </p>
  17
  18 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
  19 Nothing happens or a different file from the dropped one (likely a text file with the page title) is dragged out.
  20 </p>
  21 <p id="console"></p>
  22
  23 <script>
  24 function log(text)
  25 {
  26     var console = document.getElementById('console');
  27     console.appendChild(document.createTextNode(text));
  28     console.appendChild(document.createElement('br'));
  29 }
  30
  31 function test(expect, actual)
  32 {
  33     log((expect == actual ? 'PASS' : 'FAIL') + ': "' + expect + '" == "' + actual + '"');
  34 }
  35
  36 var destination = document.getElementById('destination');
  37 destination.addEventListener('dragover', handleDragOver, false);
  38 destination.addEventListener('drop', handleDrop, false);
  39
  40 function handleDragOver(e)
  41 {
  42     e.stopPropagation();
  43     e.preventDefault();
  44 }
  45
  46 function handleDrop(e)
  47 {
  48     e.stopPropagation();
  49     e.preventDefault();
  50
  51     log('Verifying contents of DataTransferItems...');
  52     var items = e.dataTransfer.items;
  53     var files = [];
  54     test(1, items.length);
  55
  56     for (var i = 0; i < items.length; ++i) {
  57         test('file', items[i].kind);
  58         var file = items[i].getAsFile();
  59         log('Dragged files: ' + file.name);
  60         log('Dragged file size: ' + file.size);
  61         files.push(file);
  62     }
  63
  64     // Setting up dragout items.
  65     log('Setting up dragging out with the dropped items...');
  66     var source = document.getElementById('dragout');
  67     source.addEventListener('dragstart', function(e) {
  68         for (var i = 0; i < files.length; ++i) {
  69             log('Dragging out ' + files[i].name);
  70             e.dataTransfer.items.add(files[i]);
  71         }
  72     }, false);
  73
  74     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.');
  75 }
  76
  77 </script>
  78 </body>
  79 </html>