forked from Kitware/itk-vtk-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
createFileDragAndDrop.js
49 lines (39 loc) · 1.61 KB
/
createFileDragAndDrop.js
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
import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract'
import getRootContainer from './getRootContainer'
import preventDefaults from './preventDefaults'
import style from './ItkVtkViewer.module.css'
import Mousetrap from 'mousetrap'
const MOUSETRAP = new Mousetrap()
function createFileDragAndDrop(container, onDataChange) {
const myContainer = getRootContainer(container)
const fileContainer = document.createElement('div')
fileContainer.innerHTML = `<div class="${style.bigFileDrop}"/><input type="file" class="file" style="display: none;" multiple/>`
myContainer.appendChild(fileContainer)
const fileInput = fileContainer.querySelector('input')
MOUSETRAP.bind('enter', event => {
fileInput.click()
})
return new Promise(resolve => {
function handleFile(e) {
preventDefaults(e)
MOUSETRAP.unbind('enter')
const dataTransfer = e.dataTransfer
const files = e.target.files || dataTransfer.files
myContainer.removeChild(fileContainer)
const use2D = !!vtkURLExtract.extractURLParameters().use2D
resolve(
onDataChange(myContainer, { files, use2D }).catch(error => {
const message =
'An error occurred while loading the file:\n\n' + error.message
alert(message)
createFileDragAndDrop(container, onDataChange)
})
)
}
fileInput.addEventListener('change', handleFile)
fileContainer.addEventListener('drop', handleFile)
fileContainer.addEventListener('click', e => fileInput.click())
fileContainer.addEventListener('dragover', preventDefaults)
})
}
export default createFileDragAndDrop