| <!DOCTYPE html> |
| <title>drag & drop - file drop for large file</title> |
| <style> |
| body > div { |
| height: 200px; |
| width: 200px; |
| background-color: orange; |
| } |
| </style> |
| |
| <script> |
| //JavaScript can support file sizes up to 9007199254740992 bytes ... in theory |
| //This test uses a more sane value, just for the sake of UI testing - 32 MB |
| var filesize1 = 33554432, filesize2 = 134217728; |
| var fails = [], finished = false; |
| window.onload = function() { |
| var orange = document.getElementsByTagName('div')[0]; |
| orange.ondragover = orange.ondragenter = function(e) { |
| e.preventDefault(); |
| e.dataTransfer.dropEffect = 'copy'; |
| if( !e.dataTransfer.files ) { |
| fails[fails.length] = 'No dataTransfer.files for '+e.type; |
| } |
| if( !window.FileList ) { |
| fails[fails.length] = 'No FileList interface object'; |
| return; |
| } |
| if( !( e.dataTransfer.files instanceof FileList ) ) { |
| fails[fails.length] = 'dataTransfer.files is not a FileList'; |
| } |
| if( e.dataTransfer.files.length ) { |
| fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 0 for '+e.type; |
| } |
| }; |
| orange.ondrop = function(e) { |
| e.preventDefault(); |
| if( !e.dataTransfer.files ) { |
| fails[fails.length] = 'No dataTransfer.files for '+e.type; |
| } |
| if( !window.FileList ) { |
| fails[fails.length] = 'No FileList interface object'; |
| finish(); |
| return; |
| } |
| if( !( e.dataTransfer.files instanceof FileList ) ) { |
| fails[fails.length] = 'dataTransfer.files is not a FileList'; |
| } |
| if( e.dataTransfer.files.length != 1 ) { |
| fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 1 for '+e.type; |
| } |
| if( !e.dataTransfer.files[0] ) { |
| fails[fails.length] = 'no dataTransfer.files[0] for drop'; |
| finish(); |
| return; |
| } |
| if( e.dataTransfer.files[0].size != filesize1 && e.dataTransfer.files[0].size != filesize2 ) { |
| fails[fails.length] = 'dataTransfer.files[0].size '+e.dataTransfer.files[0].size+' instead of '+filesize1+' or '+filesize2; |
| } |
| /* |
| if( !e.dataTransfer.files[0].lastModifiedDate ) { |
| fails[fails.length] = 'no dataTransfer.files[0].lastModifiedDate'; |
| } |
| */ |
| if( !window.FileReader ) { |
| fails[fails.length] = 'No FileReader constructor'; |
| finish(); |
| return; |
| } |
| var reader = new FileReader(); |
| reader.readAsBinaryString(e.dataTransfer.files[0]); |
| reader.onload = function () { |
| if( !reader.result ) { |
| fails[fails.length] = 'No file data after load'; |
| } |
| if( reader.result.length != filesize1 && reader.result.length != filesize2 ) { |
| fails[fails.length] = 'File data length '+reader.result.length+' instead of '+filesize1+' or '+filesize2; |
| } |
| finish(); |
| }; |
| setTimeout(function () { |
| if( !reader.result ) { |
| fails[fails.length] = 'No file data after timeout'; |
| } |
| finish(); |
| },1000); |
| }; |
| |
| }; |
| function finish() { |
| if( finished ) { return; } |
| finished = true; |
| document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS if the UI did not lock up'; |
| } |
| </script> |
| |
| <div></div> |
| |
| <p>Save <a href="/common/large.py?size=32Mb">32MB.txt</a> to your desktop. Use your pointing device to drag the saved file from your desktop onto the orange box, and release it. If a confirmation dialog appears, accept it. Fail if this text is not replaced with a pass message. Fail if the UI locks up immediately after dropping the file.</p> |
| <noscript><p>Enable JavaScript and reload</p></noscript> |