Check POST request status before displaying success

photon-client/src/components/settings/DeviceCard.vue

@@ -13,13 +13,15 @@ import { metricsHistorySnapshot } from "@/stores/settings/GeneralSettingsStore";
 
 const theme = useTheme();
 
-const restartProgram = () => {
-  axiosPost("/utils/restartProgram", "restart PhotonVision");
-  forceReloadPage();
+const restartProgram = async () => {
+  if (await axiosPost("/utils/restartProgram", "restart PhotonVision")) {
+    forceReloadPage();
+  }
 };
-const restartDevice = () => {
-  axiosPost("/utils/restartDevice", "restart the device");
-  forceReloadPage();
+const restartDevice = async () => {
+  if (await axiosPost("/utils/restartDevice", "restart the device")) {
+    forceReloadPage();
+  }
 };
 
 const address = inject<string>("backendHost");
@@ -38,28 +40,30 @@ const handleOfflineUpdate = async () => {
     color: "secondary",
     timeout: -1
   });
-  await axiosPost("/utils/offlineUpdate", "upload new software", formData, {
-    headers: { "Content-Type": "multipart/form-data" },
-    onUploadProgress: ({ progress }) => {
-      const uploadPercentage = (progress || 0) * 100.0;
-      if (uploadPercentage < 99.5) {
-        useStateStore().showSnackbarMessage({
-          message: "New Software Upload in Progress",
-          color: "secondary",
-          timeout: -1,
-          progressBar: uploadPercentage,
-          progressBarColor: "primary"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "Installing uploaded software...",
-          color: "secondary",
-          timeout: -1
-        });
+  if (
+    await axiosPost("/utils/offlineUpdate", "upload new software", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+      onUploadProgress: ({ progress }) => {
+        const uploadPercentage = (progress || 0) * 100.0;
+        if (uploadPercentage < 99.5) {
+          useStateStore().showSnackbarMessage({
+            message: "New Software Upload in Progress",
+            color: "secondary",
+            timeout: -1,
+            progressBar: uploadPercentage,
+            progressBarColor: "primary"
+          });
+        }
       }
-    }
-  });
-  forceReloadPage();
+    })
+  ) {
+    useStateStore().showSnackbarMessage({
+      message: "Installing uploaded software...",
+      color: "secondary",
+      timeout: -1
+    });
+    forceReloadPage();
+  }
 };
 
 const exportLogFile = ref();
@@ -116,9 +120,10 @@ const handleSettingsImport = () => {
 };
 
 const showFactoryReset = ref(false);
-const nukePhotonConfigDirectory = () => {
-  axiosPost("/utils/nukeConfigDirectory", "delete the config directory");
-  forceReloadPage();
+const nukePhotonConfigDirectory = async () => {
+  if (await axiosPost("/utils/nukeConfigDirectory", "delete the config directory")) {
+    forceReloadPage();
+  }
 };
 
 interface MetricItem {

photon-client/src/components/settings/ObjectDetectionCard.vue

@@ -26,7 +26,7 @@ const importWidth = ref<number | null>(null);
 const importVersion = ref<string | null>(null);
 
 // TODO gray out the button when model is uploading
-const handleImport = () => {
+const handleImport = async () => {
   if (importModelFile.value === null) return;
 
   const formData = new FormData();
@@ -43,25 +43,27 @@ const handleImport = () => {
     timeout: -1
   });
 
-  axiosPost("/objectdetection/import", "import an object detection model", formData, {
-    headers: { "Content-Type": "multipart/form-data" },
-    onUploadProgress: ({ progress }) => {
-      const uploadPercentage = (progress || 0) * 100.0;
-      if (uploadPercentage < 99.5) {
-        useStateStore().showSnackbarMessage({
-          message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
-          color: "secondary",
-          timeout: -1
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "Processing uploaded Object Detection Model...",
-          color: "secondary",
-          timeout: -1
-        });
+  if (
+    await axiosPost("/objectdetection/import", "import an object detection model", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+      onUploadProgress: ({ progress }) => {
+        const uploadPercentage = (progress || 0) * 100.0;
+        if (uploadPercentage < 99.5) {
+          useStateStore().showSnackbarMessage({
+            message: "Object Detection Model Upload in Process, " + uploadPercentage.toFixed(2) + "% complete",
+            color: "secondary",
+            timeout: -1
+          });
+        }
       }
-    }
-  });
+    })
+  ) {
+    useStateStore().showSnackbarMessage({
+      message: "Processing uploaded Object Detection Model...",
+      color: "secondary",
+      timeout: -1
+    });
+  }
 
   showImportDialog.value = false;
 
@@ -121,33 +123,35 @@ const nukeModels = () => {
 
 const showBulkImportDialog = ref(false);
 const importFile = ref<File | null>(null);
-const handleBulkImport = () => {
+const handleBulkImport = async () => {
   if (importFile.value === null) return;
 
   const formData = new FormData();
   formData.append("data", importFile.value);
 
-  axiosPost("/objectdetection/bulkimport", "import object detection models", formData, {
-    headers: { "Content-Type": "multipart/form-data" },
-    onUploadProgress: ({ progress }) => {
-      const uploadPercentage = (progress || 0) * 100.0;
-      if (uploadPercentage < 99.5) {
-        useStateStore().showSnackbarMessage({
-          message: "Object Detection Models Upload in Progress",
-          color: "secondary",
-          timeout: -1,
-          progressBar: uploadPercentage,
-          progressBarColor: "primary"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "Importing New Object Detection Models...",
-          color: "secondary",
-          timeout: -1
-        });
+  if (
+    await axiosPost("/objectdetection/bulkimport", "import object detection models", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+      onUploadProgress: ({ progress }) => {
+        const uploadPercentage = (progress || 0) * 100.0;
+        if (uploadPercentage < 99.5) {
+          useStateStore().showSnackbarMessage({
+            message: "Object Detection Models Upload in Progress",
+            color: "secondary",
+            timeout: -1,
+            progressBar: uploadPercentage,
+            progressBarColor: "primary"
+          });
+        }
       }
-    }
-  });
+    })
+  ) {
+    useStateStore().showSnackbarMessage({
+      message: "Importing New Object Detection Models...",
+      color: "secondary",
+      timeout: -1
+    });
+  }
   showImportDialog.value = false;
   importFile.value = null;
 };

photon-client/src/lib/PhotonUtils.ts

@@ -71,33 +71,33 @@ export const parseJsonFile = async <T extends Record<string, any>>(file: File):
  * @param description A brief description of the request for users, e.g., "import object detection models".
  * @param data Payload to be sent in the POST request
  * @param config Optional axios request configuration
- * @returns A promise that resolves when the POST request is complete
+ * @returns A promise that resolves to true if the POST request is successful, or false if an error occurs.
  */
-export const axiosPost = (url: string, description: string, data?: any, config?: any): Promise<void> => {
-  return axios
-    .post(url, data, config)
-    .then(() => {
+export const axiosPost = async (url: string, description: string, data?: any, config?: any): Promise<boolean> => {
+  try {
+    await axios.post(url, data, config);
+    useStateStore().showSnackbarMessage({
+      message: "Successfully dispatched the request to " + description + ". Waiting for backend to respond",
+      color: "success"
+    });
+    return true;
+  } catch (error: any) {
+    if (error.response) {
       useStateStore().showSnackbarMessage({
-        message: "Successfully dispatched the request to " + description + ". Waiting for backend to respond",
-        color: "success"
+        message: "The backend is unable to fulfill the request to " + description + ".",
+        color: "error"
       });
-    })
-    .catch((error) => {
-      if (error.response) {
-        useStateStore().showSnackbarMessage({
-          message: "The backend is unable to fulfill the request to " + description + ".",
-          color: "error"
-        });
-      } else if (error.request) {
-        useStateStore().showSnackbarMessage({
-          message: "Error while trying to process the request to " + description + "! The backend didn't respond.",
-          color: "error"
-        });
-      } else {
-        useStateStore().showSnackbarMessage({
-          message: "An error occurred while trying to process the request to " + description + ".",
-          color: "error"
-        });
-      }
-    });
+    } else if (error.request) {
+      useStateStore().showSnackbarMessage({
+        message: "Error while trying to process the request to " + description + "! The backend didn't respond.",
+        color: "error"
+      });
+    } else {
+      useStateStore().showSnackbarMessage({
+        message: "An error occurred while trying to process the request to " + description + ".",
+        color: "error"
+      });
+    }
+    return false;
+  }
 };