Fix/max file upload (#144)

* fix: max file upload error message * refactor: use max file size from redux store * fix: disable exhaustive-deps Co-authored-by: noctera <[email protected]>
vocascan · Dec 23, 2022 · be83674 · be83674
1 parent 80cb62a
commit be83674
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx b/src/Forms/ImportPreviewForm/GroupPreview/GroupPreview.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
 
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
@@ -29,6 +30,10 @@ const GroupPreview = ({
   const { t } = useTranslation();
   const { showSnack } = useSnack();
 
+  const maxFileSize = useSelector(
+    (state) => state.login.serverInfo.max_file_upload
+  );
+
   const [importedGroup, setImportedGroup] = useState(importedData);
   const [packages, setPackages] = useState([]);
   const [packageItems, setPackageItems] = useState([]);
@@ -90,8 +95,17 @@ const GroupPreview = ({
         await delay(1000);
         onSubmitCallback && onSubmitCallback();
       })
-      .catch((e) => {
-        showSnack("error", t("screens.allGroups.importFailMessage"));
+      .catch((error) => {
+        if (error.response?.status === 413) {
+          showSnack(
+            "error",
+            t("components.importPreviewForm.fileTooLargeFailMessage", {
+              size: maxFileSize,
+            })
+          );
+        } else {
+          showSnack("error", t("screens.allPackages.importFailMessage"));
+        }
       });
   };
 

diff --git a/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx b/src/Forms/ImportPreviewForm/PackagePreview/PackagePreview.jsx
@@ -29,6 +29,9 @@ const PackagePreview = ({ onSubmitCallback, importedData }) => {
   const { showSnack } = useSnack();
 
   const languages = useSelector((state) => state.language.languages);
+  const maxFileSize = useSelector(
+    (state) => state.login.serverInfo.max_file_upload
+  );
 
   const [languagePackage, setLanguagePackage] = useState(importedData);
   const [importQueryStatus, setImportQueryStatus] = useState(false);
@@ -47,8 +50,18 @@ const PackagePreview = ({ onSubmitCallback, importedData }) => {
         await delay(1000);
         onSubmitCallback && onSubmitCallback();
       })
-      .catch((e) => {
-        showSnack("error", t("screens.allPackages.importFailMessage"));
+      .catch((error) => {
+        console.log(error);
+        if (error.response?.status === 413) {
+          showSnack(
+            "error",
+            t("components.importPreviewForm.fileTooLargeFailMessage", {
+              size: maxFileSize,
+            })
+          );
+        } else {
+          showSnack("error", t("screens.allPackages.importFailMessage"));
+        }
       });
   };
 

diff --git a/src/i18n/locales/en/default.json b/src/i18n/locales/en/default.json
@@ -80,7 +80,8 @@
     "importPreviewForm": {
       "vocabsActive": " Put vocabs in daily query",
       "activateVocabs": "Activate vocabs",
-      "importQueryStatus": "Import vocabs with actual query status"
+      "importQueryStatus": "Import vocabs with actual query status",
+      "fileTooLargeFailMessage": "Uploaded file is too large (max {{size}})"
     },
     "vocabForm": {
       "noPackagesMessage": "No packages found",