Mercurial > hg > orthanc

comparison OrthancExplorer/upload.html @ 3067:e4f146b7d2d9 update-jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added an upload.html in pure HTML/JS (no dependencies)
author amazy
date Thu, 27 Dec 2018 15:26:27 +0100
parents
children
comparison
equal deleted inserted replaced
3066:5713952f60c0 3067:e4f146b7d2d9
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>