Change the display of the part thumbnail when dragging a file overhead

Refs:
- https://stackoverflow.com/questions/26756176/jquery-dragenter-or-dragover-to-include-children#26777526
- https://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements

Thanks, StackOverflow!

InvenTree/part/templates/part/part_base.html

@@ -13,12 +13,17 @@
 <div class="col-sm-6">
     <div class="media">
       <div class="media-left">
-        <img class="part-thumb" id="part-thumb"
+        <form id='upload-photo' method='post' action="{% url 'part-image-upload' part.id %}">
-        {% if part.image %}
+            <div class='dropzone' id='part-thumb'>
-        src="{{ part.image.url }}"
+                <img class="part-thumb"
-        {% else %}
+                {% if part.image %}
-        src="{% static 'img/blank_image.png' %}"
+                src="{{ part.image.url }}"
-        {% endif %}/>
+                {% else %}
+                src="{% static 'img/blank_image.png' %}"
+                {% endif %}/>
+            </div>
+                {% csrf_token %}
+        </form>
       </div>
     <div class="media-body">
         <h4>

InvenTree/static/css/inventree.css

@@ -10,6 +10,25 @@
     color: #ffcc00;
 }
 
+/* dropzone class - for Drag-n-Drop file uploads */
+.dropzone {
+    border: 1px solid #555;
+    z-index: 2;
+}
+
+.dropzone * {
+    pointer-events: none;
+}
+
+.dragover {
+    background-color: #55A;
+    border: 1px dashed #111;
+    opacity: 0.1;
+    -moz-opacity: 10%;
+    -webkit-opacity: 10%;
+}
+
+
 .btn-glyph {
     padding-left: 6px;
     padding-right: 6px;
@@ -28,7 +47,6 @@
 .part-thumb {
     width: 150px;
     height: 150px;
-    border: 1px black solid;
     margin: 5px;
     padding: 5px;
     object-fit: contain;
@@ -62,7 +80,7 @@
     margin-right: 50px;
     margin-left: 50px;
     width: 100%;
-    //transition: 0.1s;
+    transition: 0.1s;
 }
 
 .body {
@@ -182,3 +200,4 @@
     from { transform: scale(1) rotate(0deg);}
     to { transform: scale(1) rotate(360deg);}
 }
+

InvenTree/static/script/inventree/inventree.js

@@ -0,0 +1,16 @@
+function inventreeDocReady() {
+    /* Run this function when the HTML document is loaded.
+     * This will be called for every page that extends "base.html"
+     */
+
+    /* Add drag-n-drop functionality to any element
+     * marked with the class 'dropzone'
+     */
+    $('.dropzone').on('dragenter', function() {
+        $(this).addClass('dragover');
+    });
+
+    $('.dropzone').on('dragleave', function() {
+        $(this).removeClass('dragover');
+    });
+}

InvenTree/templates/base.html

@@ -65,6 +65,8 @@ InvenTree
 <script type="text/javascript" src="{% static 'script/select2/select2.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/moment.js' %}"></script>
 
+<script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/inventree/api.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/tables.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/modals.js' %}"></script>
@@ -76,6 +78,15 @@ InvenTree
 $(document).ready(function () {
 {% block js_ready %}
 {% endblock %}
+
+    /* Run document-ready scripts.
+     * Ref: static/script/inventree/inventree.js
+    */
+    inventreeDocReady();
+    
+    /* Display any cached alert messages
+     * Ref: static/script/inventree/notification.js
+     */
     showCachedAlerts();
 
     $('#launch-about').click(function() {