merge v0.23.0-rc changes

ui/src/components/settings/BackupUploadButton.svelte

@@ -1,8 +1,9 @@
 <script>
     import { createEventDispatcher, onDestroy } from "svelte";
     import ApiClient from "@/utils/ApiClient";
-    import { addSuccessToast, addErrorToast } from "@/stores/toasts";
     import tooltip from "@/actions/tooltip";
+    import { addSuccessToast, addErrorToast } from "@/stores/toasts";
+    import { confirm } from "@/stores/confirmation";
 
     const dispatch = createEventDispatcher();
     const backupRequestKey = "upload_backup";
@@ -13,20 +14,42 @@
     let fileInput;
     let isUploading = false;
 
-    async function upload(e) {
-        if (isUploading || !e?.target?.files?.length) {
+    function resetSelectedFile() {
+        if (fileInput) {
+            fileInput.value = "";
+        }
+    }
+
+    function uploadConfirm(file) {
+        if (!file) {
+            return;
+        }
+
+        confirm(
+            `Note that we don't perform validations for the uploaded backup files. Proceed with caution and only if you trust the source.\n\n` +
+                `Do you really want to upload "${file.name}"?`,
+            () => {
+                upload(file);
+            },
+            () => {
+                resetSelectedFile();
+            },
+        );
+    }
+
+    async function upload(file) {
+        if (isUploading || !file) {
             return;
         }
 
         isUploading = true;
 
         const data = new FormData();
-        data.set("file", e.target.files[0]);
+        data.set("file", file);
 
         try {
             await ApiClient.backups.upload(data, { requestKey: backupRequestKey });
             isUploading = false;
-
             dispatch("success");
             addSuccessToast("Successfully uploaded a new backup.");
         } catch (err) {
@@ -39,6 +62,8 @@
                 }
             }
         }
+
+        resetSelectedFile();
     }
 
     onDestroy(() => {
@@ -58,4 +83,12 @@
     <i class="ri-upload-cloud-line" />
 </button>
 
-<input bind:this={fileInput} type="file" accept="application/zip" class="hidden" on:change={upload} />
+<input
+    bind:this={fileInput}
+    type="file"
+    accept="application/zip"
+    class="hidden"
+    on:change={(e) => {
+        uploadConfirm(e?.target?.files?.[0]);
+    }}
+/>