Improve error handling on upload

src/components/upload/showCreateUploadModal.tsx

@@ -15,6 +15,7 @@ import { useForm, yupResolver } from "@mantine/form";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import * as yup from "yup";
+import shareService from "../../services/share.service";
 
 const showCreateUploadModal = (
   modals: ModalsContextProps,
@@ -57,16 +58,20 @@ const Body = ({
 
   return (
     <form
-      onSubmit={form.onSubmit((values) => {
-        modals.closeAll();
-        uploadCallback(values.link, parseInt(values.expiration), {
-          password: values.password,
-          maxVisitors: values.maxVisitors,
-        });
+      onSubmit={form.onSubmit(async (values) => {
+        if (await shareService.isIdAlreadyInUse(values.link)) {
+          form.setFieldError("link", "Link already in use.");
+        } else {
+          modals.closeAll();
+          uploadCallback(values.link, parseInt(values.expiration), {
+            password: values.password,
+            maxVisitors: values.maxVisitors,
+          });
+        }
       })}
     >
       <Group direction="column" grow>
-        <Grid align="flex-end">
+        <Grid align={form.errors.link ? "center" : "flex-end"}>
           <Col xs={9}>
             <TextInput
               variant="filled"

src/pages/api/share/[shareId]/exists.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { ShareDocument } from "../../../../types/Appwrite.type";
+import awServer from "../../../../utils/appwriteServer.util";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const shareId = req.query.shareId as string;
+  let doesExists;
+
+  try {
+    await awServer.database.getDocument<ShareDocument>("shares", shareId);
+    doesExists = true;
+  } catch {
+    doesExists = false;
+  }
+
+  res.status(200).json({ exists: doesExists });
+};
+
+export default handler;

src/pages/upload.tsx

@@ -26,43 +26,54 @@ const Upload = () => {
     security: { password?: string; maxVisitors?: number }
   ) => {
     setisUploading(true);
+    try {
+      files.forEach((file) => {
+        file.uploadingState = "inProgress";
+      });
 
-    const bucketId = JSON.parse(
-      (
-        await aw.functions.createExecution(
-          "createShare",
-          JSON.stringify({ id, security, expiration }),
-          false
-        )
-      ).stdout
-    ).id;
-    for (let i = 0; i < files.length; i++) {
-      files[i].uploadingState = "inProgress";
-      setFiles([...files]);
-      aw.storage.createFile(bucketId, "unique()", files[i]).then(
-        async () => {
-          files[i].uploadingState = "finished";
-          setFiles([...files]);
-          if (!files.some((f) => f.uploadingState == "inProgress")) {
-            await aw.functions.createExecution(
-              "finishShare",
-              JSON.stringify({ id }),
-              false
-            ),
-              setisUploading(false);
-            showCompletedUploadModal(
-              modals,
-              `${window.location.origin}/share/${bucketId}`,
-              new Date(Date.now() + expiration * 60 * 1000).toLocaleString()
-            );
+      const bucketId = JSON.parse(
+        (
+          await aw.functions.createExecution(
+            "createShare",
+            JSON.stringify({ id, security, expiration }),
+            false
+          )
+        ).stdout
+      ).id;
+      for (let i = 0; i < files.length; i++) {
+        setFiles([...files]);
+        aw.storage.createFile(bucketId, "unique()", files[i]).then(
+          async () => {
+            files[i].uploadingState = "finished";
+            setFiles([...files]);
+            if (!files.some((f) => f.uploadingState == "inProgress")) {
+              await aw.functions.createExecution(
+                "finishShare",
+                JSON.stringify({ id }),
+                false
+              ),
+                setisUploading(false);
+              showCompletedUploadModal(
+                modals,
+                `${window.location.origin}/share/${bucketId}`,
+                new Date(Date.now() + expiration * 60 * 1000).toLocaleString()
+              );
+              setFiles([]);
+            }
+          },
+          (error) => {
+            files[i].uploadingState = undefined;
+            throw error;
           }
-        },
-        (error) => {
-          files[i].uploadingState = undefined;
-          toast.error(error.message);
-          setisUploading(false);
-        }
-      );
+        );
+      }
+    } catch (e: any) {
+      setisUploading(false);
+      if (e.message) {
+        toast.error(e.message);
+      } else {
+        toast.error("An unknown error occurred.");
+      }
     }
   };
 

src/services/share.service.ts

@@ -2,18 +2,17 @@ import axios from "axios";
 import { AppwriteFileWithPreview } from "../types/File.type";
 
 const get = async (shareId: string, password?: string) => {
-  return (
-    await axios.post(`/api/share/${shareId}`, { password })
-  ).data as AppwriteFileWithPreview[];
+  return (await axios.post(`/api/share/${shareId}`, { password }))
+    .data as AppwriteFileWithPreview[];
+};
+const isIdAlreadyInUse = async (shareId: string) => {
+  return (await axios.get(`/api/share/${shareId}/exists`)).data
+    .exists as boolean;
 };
 
 const authenticateWithPassword = async (shareId: string, password?: string) => {
-  return (
-    await axios.post(
-      `/api/share/${shareId}/enterPassword`,
-      { password }
-    )
-  ).data as AppwriteFileWithPreview[];
+  return (await axios.post(`/api/share/${shareId}/enterPassword`, { password }))
+    .data as AppwriteFileWithPreview[];
 };
 
-export default { get, authenticateWithPassword };
+export default { get, authenticateWithPassword, isIdAlreadyInUse };