-
Notifications
You must be signed in to change notification settings - Fork 40
/
filednd.html
88 lines (77 loc) · 2.17 KB
/
filednd.html
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
<html>
<head>
<script>
function log(s) {
var l = document.getElementById('log');
l.innerHTML += s + '\n';
}
function makeLogFn(i) {
return function(s) {
log(' item[' + i + '] string: ' + s);
}
}
function logDrag(e) {
var dt = e.dataTransfer;
log(e.type + ' items.length: ' +
(dt.items ? dt.items.length : '<items undefined>'));
if (dt.types) {
for (var i = 0; i < dt.types.length; i++)
log(' getData(\'' + dt.types[i] + '\'): ' + dt.getData(dt.types[i]));
}
if (dt.items) {
for (var i = 0; i < dt.items.length; i++) {
var item = dt.items[i];
log(' item[' + i + '] kind: ' + item.kind + ' type: ' + item.type);
if (item.kind == 'string')
item.getAsString(makeLogFn(i));
}
}
if (dt.files) {
for (var i =0; i < dt.files.length; i++) {
var file = dt.files[i];
log(' files[' + i + '] name: ' + file.name + ' type: ' + file.type);
}
}
e.preventDefault();
}
var testFile;
function dragStart(e) {
var dt = e.dataTransfer;
dt.effectAllowed='copy';
if (testFile) {
if (dt.items) // chrome
dt.items.add(testFile);
if (dt.files) // safari
dt.files.add(testFile);
}
}
function handleFileSelect(e) {
log('got file');
testFile = e.target.files[0];
}
document.addEventListener('DOMContentLoaded', function() {
function errorHandler() {
log('unexpected error writing file');
}
document.getElementById('fileinput').addEventListener('change',
handleFileSelect, false);
document.addEventListener('dragenter', logDrag, false);
document.body.addEventListener('dragover', function(e) {
e.dataTransfer.dropEffect = 'copy';
e.preventDefault();
}, false);
document.addEventListener('dragleave', logDrag, false);
document.addEventListener('drop', logDrag, false);
var dragme = document.getElementById('dragme');
dragme.addEventListener('dragstart', dragStart, false);
});
</script>
</head>
<body>
<div draggable='true' id='dragme'>
Drag me
</div>
<input type='file' id='fileinput'/>
<pre id='log'></pre>
</body>
</html>