WIP commit

Pipfile

@@ -22,6 +22,7 @@ django-extensions = "~=3.2"
 ipython = "~=8.12.3"  # IPython follows NEP 29, so v8.13 does not support Python 3.8
 mosspy = "~=1.0"
 django-debug-toolbar = "~=4.3"
+imagekitio = "*"
 
 [dev-packages]
 django-stubs = "*"

tin/apps/assignments/views.py

@@ -7,6 +7,7 @@
 from io import BytesIO
 
 import celery
+from imagekitio import ImageKit
 
 from django import http
 from django.conf import settings
@@ -244,17 +245,32 @@ def edit_view(request, assignment_id):
 
             return redirect("assignments:show", assignment.id)
 
+    context = {
+        "assignment_form": assignment_form,
+        "course": assignment.course,
+        "folder": assignment.folder,
+        "assignment": assignment,
+        "action": "edit",
+        "nav_item": "Edit",
+    }
+
+    if settings.IMAGEKIT_ENABLED:
+        imagekit = ImageKit(
+            private_key=settings.IMAGEKIT_PRIVATE_KEY,
+            public_key=settings.IMAGEKIT_PUBLIC_KEY,
+            url_endpoint=settings.IMAGEKIT_URL_ENDPOINT,
+        )
+        context["imagekit_enabled"] = True
+        context["imagekit_url"] = settings.IMAGEKIT_URL_ENDPOINT
+        context["imagekit_public_key"] = settings.IMAGEKIT_PUBLIC_KEY
+        context["imagekit_auth"] = imagekit.get_authentication_parameters()
+    else:
+        context["imagekit_enabled"] = False
+
     return render(
         request,
         "assignments/edit_create.html",
-        {
-            "assignment_form": assignment_form,
-            "course": assignment.course,
-            "folder": assignment.folder,
-            "assignment": assignment,
-            "action": "edit",
-            "nav_item": "Edit",
-        },
+        context,
     )
 
 

tin/settings/__init__.py

@@ -317,6 +317,12 @@
 # Threshold for log messages being issues
 QUIZ_ISSUE_THRESHOLD = 5
 
+# ImageKit.io settings
+IMAGEKIT_ENABLED = False
+IMAGEKIT_URL_ENDPOINT = None
+IMAGEKIT_PUBLIC_KEY = None
+IMAGEKIT_PRIVATE_KEY = None
+
 try:
     from .secret import *  # noqa: F403
 except ImportError:

tin/static/js/markdown-image-dragdrop.js

@@ -0,0 +1,73 @@
+$(function () {
+    if (imagekitEnabled) {
+        const markdownToggle = $("#id_markdown");
+        const description = $("#description");
+        const descriptionParent = description.parent();
+
+        descriptionParent.css({
+            "position": "relative",
+        })
+
+        const upload_overlay = $("<div>").css({
+            "display": "none",
+            "position": "absolute",
+            "top": 0,
+            "left": 0,
+            "width": "92%",
+            "height": "100%",
+            "background-color": "rgba(0, 0, 0, 0.2)",
+            "z-index": 1000,
+            "text-align": "center",
+            "border": "10px dashed #000",
+            "padding": "100px 20px 0px 20px",
+            "font-size": "250%",
+            "box-sizing": "border-box",
+        }).text("Drop to embed").appendTo(descriptionParent);
+
+        descriptionParent.on({
+            "dragover": function (e) {
+                console.log("dragover");
+                e.preventDefault();
+            },
+            "dragenter": function (e) {
+                console.log("dragenter");
+                var dt = e.originalEvent.dataTransfer;
+                if (dt.types.includes("Files")) {
+                    upload_overlay.stop().fadeIn(150);
+                }
+            },
+            "drop": function (e) {
+                console.log("drop");
+                var dt = e.originalEvent.dataTransfer;
+                e.preventDefault();
+                if (dt && dt.files.length) {
+                    console.log(dt.files);
+                    if (dt.files.length != 1) {
+                        alert("Please only upload one file at a time.");
+                        return;
+                    }
+
+                    console.log(imagekitToken);
+
+                    imagekit.upload({
+                        file: dt.files[0],
+                        fileName: dt.files[0].name,
+                        tags: ["tin"],
+                        token: imagekitToken,
+                        signature: imagekitSignature,
+                        expire: imagekitExpire,
+                    }).then(result => {
+                        console.log(result);
+                    }).then(error => {
+                        console.log(error);
+                    })
+                }
+                upload_overlay.stop().fadeOut(150);
+            },
+        });
+
+        upload_overlay.on("dragleave", function () {
+            upload_overlay.stop().fadeOut(150);
+        });
+    }
+});

tin/templates/assignments/edit_create.html

@@ -15,6 +15,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"
           integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
           crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/imagekit.min.js"></script>
+  <script src="{% static 'js/markdown-image-dragdrop.js' %}"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $("#id_due").datetimepicker({
@@ -31,6 +33,24 @@
               });
           }
       });
+
+      const imagekitEnabled = {{ imagekit_enabled|yesno:"true,false" }};
+      let imagekit = null;
+      let imagekitToken = null;
+      let imagekitSignature = null;
+      let imagekitExpire = null;
+      if (imagekitEnabled) {
+          imagekit = new ImageKit({
+              publicKey: "{{ imagekit_public_key }}",
+              urlEndpoint: "{{ imagekit_url }}",
+          });
+
+          imagekitToken = "{{ imagekit_auth.token }}";
+          imagekitSignature = "{{ imagekit_auth.signature }}";
+          imagekitExpire = "{{ imagekit_auth.expire }}";
+      }
+
+      console.log(imagekit);
   </script>
 {% endblock %}