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) => {
+      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,6 +26,10 @@ const Upload = () => {
     security: { password?: string; maxVisitors?: number }
   ) => {
     setisUploading(true);
+    try {
+      files.forEach((file) => {
+        file.uploadingState = "inProgress";
+      });
 
       const bucketId = JSON.parse(
         (
@@ -37,7 +41,6 @@ const Upload = () => {
         ).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 () => {
@@ -55,15 +58,23 @@ const Upload = () => {
                 `${window.location.origin}/share/${bucketId}`,
                 new Date(Date.now() + expiration * 60 * 1000).toLocaleString()
               );
+              setFiles([]);
             }
           },
           (error) => {
             files[i].uploadingState = undefined;
-          toast.error(error.message);
+            throw error;
-          setisUploading(false);
           }
         );
       }
+    } catch (e: any) {
+      setisUploading(false);
+      if (e.message) {
+        toast.error(e.message);
+      } else {
+        toast.error("An unknown error occurred.");
+      }
+    }
   };
 
   if (!isSignedIn) {

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 (
+  return (await axios.post(`/api/share/${shareId}`, { password }))
-    await axios.post(`/api/share/${shareId}`, { password })
+    .data as AppwriteFileWithPreview[];
-  ).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 (
+  return (await axios.post(`/api/share/${shareId}/enterPassword`, { password }))
-    await axios.post(
+    .data as AppwriteFileWithPreview[];
-      `/api/share/${shareId}/enterPassword`,
-      { password }
-    )
-  ).data as AppwriteFileWithPreview[];
 };
 
-export default { get, authenticateWithPassword };
+export default { get, authenticateWithPassword, isIdAlreadyInUse };