Show messages when imports succeed.

web/static/js/main.js

@@ -603,6 +603,16 @@ function show_error(error) {
     }, 5000);
 }
 
+function show_success(error) {
+    document.getElementById("success").querySelector("span.success-message").textContent =
+        error;
+    document.getElementById("success").classList.add("is-active");
+
+    window.setTimeout(() => {
+        document.getElementById("success").classList.remove("is-active");
+    }, 5000);
+}
+
 $colorPickerInput.value = colorPicker.color.hexString;
 
 $colorPickerInput.addEventListener("input", () => {
@@ -753,12 +763,25 @@ $uploader.addEventListener("change", (ev) => {
         fileReader.onload = (e) => resolve(fileReader.result);
         fileReader.readAsDataURL($uploader.files[0]);
     }).then((dataUrl) => {
+        $importBtn.setAttribute("disabled", true);
+
         fetch(`/dashboard/api/guild/${guildId()}/export/${urlTail}`, {
             method: "PUT",
             body: JSON.stringify({ body: dataUrl.split(",")[1] }),
-        }).then(() => {
-            delete $uploader.files[0];
-        });
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                $importBtn.removeAttribute("disabled");
+
+                if (data.error) {
+                    show_error(data.error);
+                } else {
+                    show_success(data.message);
+                }
+            })
+            .then(() => {
+                delete $uploader.files[0];
+            });
     });
 });