.

rapids/templates/rapids/rapid_form.html

@@ -117,6 +117,7 @@
             // dT.items.add(evt.dataTransfer.files[0]);
             // dT.items.add(evt.dataTransfer.files[3]);
             // fileInput.files = dT.files;
+            loadDicomViewer();
 
             evt.preventDefault();
             evt.stopPropagation();
@@ -229,6 +230,102 @@
         }
     }
 
+    async function loadDicomViewer(callback) {
+        $("#single-dicom-viewer").empty()
+        //images = []
+        //Function that returns a promise to read the file
+        const reader = (file) => {
+            return new Promise((resolve, reject) => {
+                const fileReader = new FileReader();
+                fileReader.onload = () => resolve(fileReader);
+                fileReader.readAsDataURL(file);
+            });
+        }
+
+        const readFile = (file, el) => {
+            reader(file).then(reader => {
+                var image = new Image();
+                image.height = 100;
+                image.title = file.name;
+                image.src = reader.result;
+                image.className = "temp-thumb";
+                console.log("read" ,el);
+                $(el).parent().parent().prepend(image);
+                //images.push(reader.result);
+                loadViewer(images);
+            });
+        }
+
+
+
+        file_set = $("#image_form_set input[type=file]");
+
+
+
+        file_set.each(async (n, el) => {
+            console.log(el);
+            if (el.files.length > 0) {
+                filename = el.files[0].name;
+                await readFile(el.files[0], el);
+            }
+        })
+
+
+        console.log("images from files", images);
+
+
+    }
+
+    function loadViewer(images) {
+        //dicomViewer.loadCornerstone($("#single-dicom-viewer"), null, images, annotations);
+        file_set = $("#image_form_set input[type=file]");
+
+        n = 0;
+        for (let i = 0; i < file_set.length; i++) {
+            el = file_set.get(i)
+            if (el.files.length > 0) {
+                n++;
+            }
+        }
+
+        image_set = $("#image_form_set img");
+        if (n == image_set.length) {
+            const event = new CustomEvent('loadDicomViewer', { "detail": image_set });
+
+            window.dispatchEvent(event);
+            sortable('.sortable');
+            //sortable('.sortable')[0].addEventListener('sortstop', function(e) {
+            updateImagePositions();
+        }
+
+    }
+
+    function updateImagePositions() {
+        console.log("UP pos");
+
+        file_set = $("#image_form_set ul");
+
+        n = 0;
+        for (let i = 0; i < file_set.length; i++) {
+            ul = file_set.get(i);
+            console.log(ul)
+
+            file_element = $(ul).find("input[type=file]").get(0);
+
+            // If a (new) file is being uploaded we save it's name prior to it being hashed
+            if (file_element.files.length > 0) {
+                file_name = file_element.files[0].name
+                $(ul).find("input[type=text]").val(file_name);
+            }
+
+            if (file_element.files.length > 0 || $(ul).find(":contains('Currently:')")) {
+                n++;
+                $(ul).find("input[type=number]").val(n);
+            }
+        }
+
+    }
+
 </script>
 
 {{ form.media }}
@@ -289,4 +386,7 @@
         {{ answer_formset.empty_form.as_ul }}
     </ul>
 </div>
+
+
+<div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
 {% endblock %}