[task_edit/files] fix drag and drop behaviour

Fixes #984
UCL-INGI · Nov 23, 2023 · 3fa7be6 · 3fa7be6
1 parent 1907e7b
commit 3fa7be6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/inginious/frontend/static/js/studio.js b/inginious/frontend/static/js/studio.js
@@ -691,28 +691,31 @@ function drag_drop_handler() {
 
     // Drag enter
     $(".upload-area").on('dragenter', function (e) {
-        $("#edit_task_tabs_content").append("<p id='dragtext'><b>Drag a file here</b></p>");
+        $("#dragtext").css("visibility", "visible");
+        $(this).addClass("dragin");
         e.stopPropagation();
         e.preventDefault();
-
     });
 
     // Drag over
     $(".upload-area").on('dragover', function (e) {
         $(this).addClass("dragin");
+        $("#dragtext").css("visibility", "visible");
         e.stopPropagation();
         e.preventDefault();
 
     });
 
     $(".upload-area").on('dragleave',function(e){
         $(this).removeClass("dragin");
-        $("#dragtext").remove();
+        $("#dragtext").css("visibility", "hidden");
+        e.stopPropagation();
+        e.preventDefault();
     });
 
     // Drop
     $(".upload-area").on('drop', function (e) {
-        $("#dragtext").remove();
+        $("#dragtext").css("visibility", "hidden");
         e.stopPropagation();
         e.preventDefault();
 
@@ -723,11 +726,6 @@ function drag_drop_handler() {
         uploadData(fd);
     });
 
-    // Open file selector on div click
-    $(".upload-area").click(function(){
-        $("#file").click();
-    });
-
     // file selected
     $("#file").change(function(){
         var fd = new FormData();

diff --git a/inginious/frontend/templates/taskset_admin/edit_tabs/files.html b/inginious/frontend/templates/taskset_admin/edit_tabs/files.html
@@ -1,7 +1,8 @@
 {# This file is part of INGInious. See the LICENSE and the COPYRIGHTS files for #}
 {# more information about the licensing of this file. #}
 
-<div role="tabpanel" class="tab-pane show active upload-area" id="tab_file_list">
+<div role="tabpanel" class="tab-pane show active " id="tab_file_list">
+
     {% if error is not none %}
         <div class="alert alert-danger" role="alert" style="text-align: center;">
             {{ error }}
@@ -10,7 +11,7 @@
 
     <input type="file" name="file" id="file" style="display: none;">
     <div style="overflow-x:auto;">
-        <table class="table table-bordered table-sm">
+        <table class="table table-bordered table-sm upload-area">
             <thead class="table-borderless">
                 <th class="col-sm-8">{{_("Path")}}</th>
                 <th class="col-sm-1">{{_("Download")}}</th>
@@ -66,4 +67,4 @@
     drag_drop_handler();
     </script>
 </div>
-
+<p id="dragtext" class="mb-0" style="visibility: hidden;"><b>{{ _("Drag and drop a file here.") }}</b></p>