1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<title>drag & drop - multiple file drop</title>
<style>
body > div {
height: 200px;
width: 200px;
background-color: orange;
}
</style>
<script>
var filename1 = 'fail.png', filesize1 = '759', filetype1 = 'image/png', filename2 = 'fail.txt', filesize2 = '4', filetype2 = 'text/plain';
var fails = [], finished = false, donecount = 0;
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 != 2 ) {
fails[fails.length] = 'dataTransfer.files.length is '+e.dataTransfer.files.length+' instead of 2 for '+e.type;
}
if( !e.dataTransfer.files[0] ) {
fails[fails.length] = 'no dataTransfer.files[0] for drop';
finish();
return;
}
if( !e.dataTransfer.files[1] ) {
fails[fails.length] = 'no dataTransfer.files[1] for drop';
finish();
return;
}
//allow files to be dropped in any order, since this will be determined by the OS
var i0 = 0, i1 = 1;
if( e.dataTransfer.files[0].name == filename2 ) {
i0 = 1;
i1 = 0;
}
if( e.dataTransfer.files[i0].size != filesize1 ) {
fails[fails.length] = 'dataTransfer.files['+i0+'].size '+e.dataTransfer.files[i0].size+' instead of '+filesize1;
}
/*
if( !e.dataTransfer.files[i0].lastModifiedDate ) {
fails[fails.length] = 'no dataTransfer.files['+i0+'].lastModifiedDate';
}
*/
if( e.dataTransfer.files[i0].name != filename1 ) {
fails[fails.length] = 'dataTransfer.files['+i0+'].name '+e.dataTransfer.files[i0].name+' instead of '+filename1;
}
if( e.dataTransfer.files[i0].type != filetype1 ) {
fails[fails.length] = 'dataTransfer.files['+i0+'].type '+e.dataTransfer.files[i0].type+' instead of '+filetype1;
}
if( e.dataTransfer.files[i1].size != filesize2 ) {
fails[fails.length] = 'dataTransfer.files['+i1+'].size '+e.dataTransfer.files[i1].size+' instead of '+filesize2;
}
/*
if( !e.dataTransfer.files[i1].lastModifiedDate ) {
fails[fails.length] = 'no dataTransfer.files['+i1+'].lastModifiedDate';
}
*/
if( e.dataTransfer.files[i1].name != filename2 ) {
fails[fails.length] = 'dataTransfer.files['+i1+'].name '+e.dataTransfer.files[i1].name+' instead of '+filename2;
}
if( e.dataTransfer.files[i1].type != filetype2 ) {
fails[fails.length] = 'dataTransfer.files['+i1+'].type '+e.dataTransfer.files[i1].type+' instead of '+filetype2;
}
if( !window.FileReader ) {
fails[fails.length] = 'No FileReader constructor';
finish();
return;
}
var reader1 = new FileReader();
reader1.readAsBinaryString(e.dataTransfer.files[i0]);
reader1.onload = function () {
if( !reader1.result ) {
fails[fails.length] = 'No files['+i0+'] data after load';
}
if( reader1.result.length != filesize1 ) {
fails[fails.length] = 'files['+i0+'] file data length '+reader1.result.length+' instead of '+filesize1;
}
if( donecount++ ) {
finish();
}
};
var reader2 = new FileReader();
reader2.onload = function () {
if( !reader2.result ) {
fails[fails.length] = 'No files['+i1+'] data after load';
}
if( reader2.result.length != filesize2 ) {
fails[fails.length] = 'files['+i1+'] file data length '+reader2.result.length+' instead of '+filesize2;
}
if( donecount++ ) {
finish();
}
};
reader2.readAsBinaryString(e.dataTransfer.files[i1]);
setTimeout(function () {
if( !reader1.result ) {
fails[fails.length] = 'No files['+i0+'] data after timeout';
}
if( !reader2.result ) {
fails[fails.length] = 'No files['+i1+'] data after timeout';
}
finish();
},1000);
};
};
function finish() {
if( finished ) { return; }
finished = true;
document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS';
}
</script>
<div></div>
<p>Save <a href="../resources/fail.png">this image</a> and <a href="fail.txt">this text file</a> to your desktop. Use your pointing device to drag both saved files (at the same time) from your desktop onto the orange box, and release them. If a confirmation dialog appears, accept it. Fail if nothing happens, or if the browser simply displays one/both of the files.</p>
<noscript><p>Enable JavaScript and reload</p></noscript>
|
