use the filenames instead of indexes on delete

ui/src/components/base/Draggable.svelte

@@ -60,7 +60,11 @@
 
         list = list;
 
-        dispatch("sort", list);
+        dispatch("sort", {
+            oldIndex: start,
+            newIndex: target,
+            list: list,
+        });
     }
 </script>
 

ui/src/components/records/RecordUpsertPanel.svelte

@@ -39,7 +39,7 @@
     let isSaving = false;
     let confirmClose = false; // prevent close recursion
     let uploadedFilesMap = {}; // eg.: {"field1":[File1, File2], ...}
-    let deletedFileIndexesMap = {}; // eg.: {"field1":[0, 1], ...}
+    let deletedFileNamesMap = {}; // eg.: {"field1":[0, 1], ...}
     let originalSerializedData = JSON.stringify(null);
     let serializedData = originalSerializedData;
     let activeTab = tabFormKey;
@@ -49,8 +49,7 @@
     $: hasEditorField = !!collection?.schema?.find((f) => f.type === "editor");
 
     $: hasFileChanges =
-        CommonHelper.hasNonEmptyProps(uploadedFilesMap) ||
-        CommonHelper.hasNonEmptyProps(deletedFileIndexesMap);
+        CommonHelper.hasNonEmptyProps(uploadedFilesMap) || CommonHelper.hasNonEmptyProps(deletedFileNamesMap);
 
     $: serializedData = JSON.stringify(record);
 
@@ -84,7 +83,7 @@
         original = model || new Record();
         record = original.$clone();
         uploadedFilesMap = {};
-        deletedFileIndexesMap = {};
+        deletedFileNamesMap = {};
 
         // wait to populate the fields to get the normalized values
         await tick();
@@ -105,7 +104,7 @@
         setErrors({}); // reset errors
         original = newOriginal || new Record();
         uploadedFilesMap = {};
-        deletedFileIndexesMap = {};
+        deletedFileNamesMap = {};
 
         // to avoid layout shifts we replace only the file and non-schema fields
         const skipFields = collection?.schema?.filter((f) => f.type != "file")?.map((f) => f.name) || [];
@@ -277,10 +276,10 @@
         }
 
         // unset deleted files (if any)
-        for (const key in deletedFileIndexesMap) {
-            const indexes = CommonHelper.toArray(deletedFileIndexesMap[key]);
-            for (const index of indexes) {
-                formData.append(key + "." + index, "");
+        for (const key in deletedFileNamesMap) {
+            const names = CommonHelper.toArray(deletedFileNamesMap[key]);
+            for (const name of names) {
+                formData.append(key + "." + name, "");
             }
         }
 
@@ -557,7 +556,7 @@
                         {record}
                         bind:value={record[field.name]}
                         bind:uploadedFiles={uploadedFilesMap[field.name]}
-                        bind:deletedFileIndexes={deletedFileIndexesMap[field.name]}
+                        bind:deletedFileNames={deletedFileNamesMap[field.name]}
                     />
                 {:else if field.type === "relation"}
                     <RelationField {field} bind:value={record[field.name]} />

ui/src/components/records/fields/FileField.svelte

@@ -12,7 +12,7 @@
     export let record;
     export let value = "";
     export let uploadedFiles = []; // Array<File> array
-    export let deletedFileIndexes = []; // Array<int> array
+    export let deletedFileNames = []; // Array<string> array
     export let field = new SchemaField();
 
     let fileInput;
@@ -25,9 +25,9 @@
         uploadedFiles = CommonHelper.toArray(uploadedFiles);
     }
 
-    // normalize delited file indexes
-    $: if (!Array.isArray(deletedFileIndexes)) {
-        deletedFileIndexes = CommonHelper.toArray(deletedFileIndexes);
+    // normalize deleted files
+    $: if (!Array.isArray(deletedFileNames)) {
+        deletedFileNames = CommonHelper.toArray(deletedFileNames);
     }
 
     $: isMultiple = field.options?.maxSelect > 1;
@@ -40,20 +40,20 @@
 
     $: maxReached =
         (valueAsArray.length || uploadedFiles.length) &&
-        field.options?.maxSelect <= valueAsArray.length + uploadedFiles.length - deletedFileIndexes.length;
+        field.options?.maxSelect <= valueAsArray.length + uploadedFiles.length - deletedFileNames.length;
 
-    $: if (uploadedFiles !== -1 || deletedFileIndexes !== -1) {
+    $: if (uploadedFiles !== -1 || deletedFileNames !== -1) {
         triggerListChange();
     }
 
-    function restoreExistingFile(valueIndex) {
-        CommonHelper.removeByValue(deletedFileIndexes, valueIndex);
-        deletedFileIndexes = deletedFileIndexes;
+    function restoreExistingFile(name) {
+        CommonHelper.removeByValue(deletedFileNames, name);
+        deletedFileNames = deletedFileNames;
     }
 
-    function removeExistingFile(valueIndex) {
-        CommonHelper.pushUnique(deletedFileIndexes, valueIndex);
-        deletedFileIndexes = deletedFileIndexes;
+    function removeExistingFile(name) {
+        CommonHelper.pushUnique(deletedFileNames, name);
+        deletedFileNames = deletedFileNames;
     }
 
     function removeNewFile(index) {
@@ -67,7 +67,7 @@
     function triggerListChange() {
         filesListElem?.dispatchEvent(
             new CustomEvent("change", {
-                detail: { value, uploadedFiles, deletedFileIndexes },
+                detail: { value, uploadedFiles, deletedFileNames },
                 bubbles: true,
             })
         );
@@ -85,7 +85,7 @@
         }
 
         for (const file of files) {
-            const currentTotal = valueAsArray.length + uploadedFiles.length - deletedFileIndexes.length;
+            const currentTotal = valueAsArray.length + uploadedFiles.length - deletedFileNames.length;
 
             if (field.options?.maxSelect <= currentTotal) {
                 break;
@@ -131,7 +131,7 @@
 
         <div bind:this={filesListElem} class="list">
             {#each valueAsArray as filename, i (filename + record.id)}
-                {@const isDeleted = deletedFileIndexes.includes(i)}
+                {@const isDeleted = deletedFileNames.includes(filename)}
                 <Draggable
                     bind:list={value}
                     group={field.name + "_uploaded"}
@@ -141,7 +141,7 @@
                     let:dragover
                 >
                     <div class="list-item" class:dragging class:dragover>
-                        <div class:fade={deletedFileIndexes.includes(i)}>
+                        <div class:fade={isDeleted}>
                             <RecordFileThumb {record} {filename} />
                         </div>
 
@@ -161,11 +161,11 @@
                         </div>
 
                         <div class="actions">
-                            {#if deletedFileIndexes.includes(i)}
+                            {#if isDeleted}
                                 <button
                                     type="button"
                                     class="btn btn-sm btn-danger btn-transparent"
-                                    on:click={() => restoreExistingFile(i)}
+                                    on:click={() => restoreExistingFile(filename)}
                                 >
                                     <span class="txt">Restore</span>
                                 </button>
@@ -174,7 +174,7 @@
                                     type="button"
                                     class="btn btn-transparent btn-hint btn-sm btn-circle btn-remove"
                                     use:tooltip={"Remove file"}
-                                    on:click={() => removeExistingFile(i)}
+                                    on:click={() => removeExistingFile(filename)}
                                 >
                                     <i class="ri-close-line" />
                                 </button>