[#2445] added support for multiple files sort in the Admin UI

ui/src/components/base/Draggable.svelte

@@ -5,13 +5,14 @@
 
     export let index;
     export let list = [];
+    export let group = "default";
     export let disabled = false;
 
     let dragging = false;
     let dragover = false;
 
     function onDrag(event, i) {
-        if (!event && !disabled) {
+        if (!event || disabled) {
             return;
         }
 
@@ -19,11 +20,17 @@
 
         event.dataTransfer.effectAllowed = "move";
         event.dataTransfer.dropEffect = "move";
-        event.dataTransfer.setData("text/plain", i);
+        event.dataTransfer.setData(
+            "text/plain",
+            JSON.stringify({
+                index: i,
+                group: group,
+            })
+        );
     }
 
     function onDrop(event, target) {
-        if (!event && !disabled) {
+        if (!event || disabled) {
             return;
         }
 
@@ -32,7 +39,16 @@
 
         event.dataTransfer.dropEffect = "move";
 
-        const start = parseInt(event.dataTransfer.getData("text/plain"));
+        let dragData = {};
+        try {
+            dragData = JSON.parse(event.dataTransfer.getData("text/plain"));
+        } catch (_) {}
+
+        if (dragData.group != group) {
+            return; // different draggable group
+        }
+
+        const start = dragData.index << 0;
 
         if (start < target) {
             list.splice(target + 1, 0, list[start]);
@@ -49,7 +65,7 @@
 </script>
 
 <div
-    draggable={true}
+    draggable={!disabled}
     class="draggable"
     class:dragging
     class:dragover

ui/src/components/base/UploadedFilePreview.svelte

@@ -11,22 +11,23 @@
     $: previewUrl = "";
 
     function loadPreviewUrl() {
-        previewUrl = "";
-
         if (CommonHelper.hasImageExtension(file?.name)) {
             CommonHelper.generateThumb(file, size, size)
                 .then((url) => {
                     previewUrl = url;
                 })
                 .catch((err) => {
+                    previewUrl = "";
                     console.warn("Unable to generate thumb: ", err);
                 });
+        } else {
+            previewUrl = "";
         }
     }
 </script>
 
 {#if previewUrl}
-    <img src={previewUrl} width={size} height={size} alt={file.name} />
+    <img draggable={false} src={previewUrl} width={size} height={size} alt={file.name} />
 {:else}
     <i class="ri-file-line" alt={file.name} />
 {/if}