Drag and drop to upload and create File Annotation

omero_script_ui/templates/omero_script_ui/import_from_csv.html

@@ -63,6 +63,9 @@
       a {
         text-decoration: none;
       }
+      .highlight {
+        background-color: yellow;
+      }
     </style>
 
     <!-- extend here to add page title -->
@@ -199,7 +202,7 @@ <h3>Annotating {{ source_dtype }}{{ source_names|pluralize }}:
                   <td valign="top">
                     <!-- List - Users should enter comma-separated values into field -->
 
-                    <input tabindex="1" type="text" name="File_Annotation" />
+                    <input id="File_Annotation" tabindex="1" type="text" name="File_Annotation" />
 
                     <!-- If "File Annotation", allow user to choose file to upload, to create a File-Annotation -->
 
@@ -501,6 +504,85 @@ <h3>Annotating {{ source_dtype }}{{ source_names|pluralize }}:
           });
         event.preventDefault();
       });
+
+      // Drag and drop for File Upload. See:
+      // https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
+      let dropArea = document.getElementById('script_form');
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false)
+      })
+
+      function preventDefaults (e) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+
+      ;['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false)
+      })
+
+      ;['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false)
+      })
+
+      function highlight(e) {
+        dropArea.classList.add('highlight')
+      }
+
+      function unhighlight(e) {
+        dropArea.classList.remove('highlight')
+      }
+
+      dropArea.addEventListener('drop', handleDrop, false)
+
+      function handleDrop(e) {
+        let dt = e.dataTransfer
+        let files = dt.files
+
+        handleFiles(files)
+      }
+
+      function handleFiles(files) {
+        ([...files]).forEach(uploadFile)
+      }
+
+      function getCookie(name) {
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+          var cookies = document.cookie.split(';');
+          for (var i = 0; i < cookies.length; i++) {
+              var cookie = cookies[i].trim();
+              // Does this cookie string begin with the name we want?
+              if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                  break;
+              }
+          }
+        }
+        return cookieValue;
+      }
+      var csrftoken = getCookie('csrftoken');
+
+      function uploadFile(file) {
+        let url = '{% url "scriptui_post_file_annotation" %}'
+        let formData = new FormData()
+
+        formData.append('file_annotation', file)
+
+        fetch(url, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            "X-CSRFToken": csrftoken,
+          }
+        })
+        .then((rsp) => rsp.json())
+        .then(data => {
+          console.log(data);
+          document.getElementById("File_Annotation").value = data.fileAnnId;
+        })
+        .catch(() => { alert("File upload failed")})
+      }
     </script>
   </body>
 </html>

omero_script_ui/urls.py

@@ -26,4 +26,7 @@
 
     re_path(r"^import_from_csv/$", views.import_from_csv,
             name="omero_script_ui_import_from_csv"),
+
+    re_path(r"^post_file_annotation/$", views.post_file_annotation,
+            name="scriptui_post_file_annotation"),
 ]

omero_script_ui/views.py

@@ -17,8 +17,10 @@
 #
 
 from django.shortcuts import render
+from django.http import JsonResponse
 
-from omeroweb.decorators import login_required
+from omeroweb.webclient.decorators import login_required
+from omeroweb.webclient.controller.container import BaseContainer
 
 ALLOWED_PARAM = {
     "Project": ["Project", "Dataset", "Image"],
@@ -84,3 +86,16 @@ def import_from_csv(request, conn=None, **kwargs):
                }
 
     return render(request, "omero_script_ui/import_from_csv.html", context)
+
+
+@login_required(setGroupContext=True)
+def post_file_annotation(request, conn=None, **kwargs):
+
+    fileann_id = None
+    if "file_annotation" in request.FILES:
+        fileupload = request.FILES["file_annotation"]
+        if fileupload is not None and fileupload != "":
+            manager = BaseContainer(conn)
+            fileann_id = manager.createFileAnnotations(fileupload, [])
+
+    return JsonResponse({'fileAnnId': fileann_id})