|
3067
|
1 <!DOCTYPE html>
|
|
|
2
|
|
|
3 <html>
|
|
|
4
|
|
|
5 <head>
|
|
|
6 <meta charset="utf-8">
|
|
|
7 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
8 <title>Orthanc Explorer Upload page</title>
|
|
|
9 <style>
|
|
|
10 #file-catcher {
|
|
|
11 width: 100%;
|
|
|
12 height: 100%;
|
|
|
13 }
|
|
|
14
|
|
|
15 .no-files {
|
|
|
16 border: 5px dashed #555;
|
|
|
17 }
|
|
|
18
|
|
|
19 .files-over {
|
|
|
20 border: 5px dashed #55B;
|
|
|
21 }
|
|
|
22
|
|
|
23 .files-ready {
|
|
|
24 border: 5px dashed green;
|
|
|
25 }
|
|
|
26
|
|
|
27 .files-uploading {
|
|
|
28 border: 5px dashed orange;
|
|
|
29 }
|
|
|
30 </style>
|
|
|
31
|
|
|
32 </head>
|
|
|
33
|
|
|
34 <body>
|
|
|
35
|
|
|
36 <form id='file-catcher' class="no-files">
|
|
|
37 <p>Drag one or more files to this Drop zone ...</p>
|
|
|
38 <input id='file-input' type='file' multiple />
|
|
|
39 <button type='submit'>
|
|
|
40 Submit
|
|
|
41 </button>
|
|
|
42 </form>
|
|
|
43
|
|
|
44 <div id='file-list-display'></div>
|
|
|
45 </body>
|
|
|
46 <script>
|
|
|
47 (function () {
|
|
|
48 var fileCatcher = document.getElementById('file-catcher');
|
|
|
49 var fileInput = document.getElementById('file-input');
|
|
|
50 var fileListDisplay = document.getElementById('file-list-display');
|
|
|
51 var maxConcurrentUploads = 4;
|
|
|
52 var currentUploadCount = 0;
|
|
|
53
|
|
|
54 var fileList = [];
|
|
|
55 var renderFileList, sendFile;
|
|
|
56
|
|
|
57 removeDragData = function (ev) {
|
|
|
58 console.log('Removing drag data');
|
|
|
59
|
|
|
60 if (ev.dataTransfer.items) {
|
|
|
61 // Use DataTransferItemList interface to remove the drag data
|
|
|
62 ev.dataTransfer.items.clear();
|
|
|
63 } else {
|
|
|
64 // Use DataTransfer interface to remove the drag data
|
|
|
65 ev.dataTransfer.clearData();
|
|
|
66 }
|
|
|
67 }
|
|
|
68
|
|
|
69 renderFileList = function () {
|
|
|
70 fileListDisplay.innerHTML = '';
|
|
|
71 fileList.forEach(function (file, index) {
|
|
|
72 let fileDisplayEl = document.createElement('p');
|
|
|
73 fileDisplayEl.innerHTML = (index + 1) + ': ' + file.name;
|
|
|
74 fileListDisplay.appendChild(fileDisplayEl);
|
|
|
75 });
|
|
|
76 };
|
|
|
77
|
|
|
78 sendFile = function (file) {
|
|
|
79 if (currentUploadCount >= maxConcurrentUploads) { // retry later
|
|
|
80 setTimeout(function() {sendFile(file);}, 1);
|
|
|
81 } else {
|
|
|
82 currentUploadCount++;
|
|
|
83 let formData = new FormData();
|
|
|
84 let request = new XMLHttpRequest();
|
|
|
85
|
|
|
86 formData.set('file', file);
|
|
|
87 request.open("POST", '/instances');
|
|
|
88 request.onreadystatechange = function() { // Call a function when the state changes.
|
|
|
89 if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
|
|
|
90 // Request finished. Do processing here.
|
|
|
91 currentUploadCount--;
|
|
|
92 } else if (this.readyState === XMLHttpRequest.DONE && this.status !== 200) {
|
|
|
93 console.log("failed", this);
|
|
|
94 currentUploadCount--;
|
|
|
95 }
|
|
|
96 }
|
|
|
97 request.send(formData);
|
|
|
98 }
|
|
|
99 };
|
|
|
100
|
|
|
101 setFileCatchClass = function (style) {
|
|
|
102 fileCatcher.classList.remove("no-files");
|
|
|
103 fileCatcher.classList.remove("files-over");
|
|
|
104 fileCatcher.classList.remove("files-ready");
|
|
|
105 fileCatcher.classList.remove("files-uploading");
|
|
|
106
|
|
|
107 fileCatcher.classList.add(style);
|
|
|
108 };
|
|
|
109
|
|
|
110 fileCatcher.addEventListener('submit', function (evnt) {
|
|
|
111 evnt.preventDefault();
|
|
|
112 setFileCatchClass("files-uploading");
|
|
|
113 fileList.forEach(function (file) {
|
|
|
114 sendFile(file);
|
|
|
115 });
|
|
|
116 fileList = [];
|
|
|
117 renderFileList();
|
|
|
118 setFileCatchClass("no-files");
|
|
|
119 });
|
|
|
120
|
|
|
121 fileCatcher.addEventListener('drop', function (e) {
|
|
|
122 console.log('File(s) dropped in zone', e);
|
|
|
123 e.preventDefault();
|
|
|
124
|
|
|
125 if (e.dataTransfer.items) {
|
|
|
126 // Use DataTransferItemList interface to access the file(s)
|
|
|
127 for (var i = 0; i < e.dataTransfer.items.length; i++) {
|
|
|
128 // If dropped items aren't files, reject them
|
|
|
129 if (e.dataTransfer.items[i].kind === 'file') {
|
|
|
130 var file = e.dataTransfer.items[i].getAsFile();
|
|
|
131 fileList.push(file);
|
|
|
132 console.log('... file[' + i + '].name = ' + file.name);
|
|
|
133 }
|
|
|
134 }
|
|
|
135 } else {
|
|
|
136 // Use DataTransfer interface to access the file(s)
|
|
|
137 for (var i = 0; i < e.dataTransfer.files.length; i++) {
|
|
|
138 fileList.push(file);
|
|
|
139 console.log('... file[' + i + '].name = ' + e.dataTransfer.files[i].name);
|
|
|
140 }
|
|
|
141 }
|
|
|
142
|
|
|
143 renderFileList();
|
|
|
144 // Pass event to removeDragData for cleanup
|
|
|
145 removeDragData(e);
|
|
|
146 setFileCatchClass("files-ready");
|
|
|
147 });
|
|
|
148
|
|
|
149 fileCatcher.addEventListener('dragover', function (e) {
|
|
|
150 console.log('File(s) in drop zone', e);
|
|
|
151
|
|
|
152 // Prevent default behavior (Prevent file from being opened)
|
|
|
153 e.preventDefault();
|
|
|
154 setFileCatchClass("files-over");
|
|
|
155 });
|
|
|
156
|
|
|
157 fileInput.addEventListener('change', function (evnt) {
|
|
|
158 fileList = [];
|
|
|
159 for (var i = 0; i < fileInput.files.length; i++) {
|
|
|
160 fileList.push(fileInput.files[i]);
|
|
|
161 }
|
|
|
162 renderFileList();
|
|
|
163 if (fileList.length > 0) {
|
|
|
164 setFileCatchClass("files-ready");
|
|
|
165 }
|
|
|
166 });
|
|
|
167
|
|
|
168 })();
|
|
|
169 </script>
|
|
|
170
|
|
|
171 </html> |
