fix: move plus button outside the preview area

Author: abhitrueprogrammer

src/app/upload/page.tsx

@@ -97,33 +97,36 @@ export default function Page() {
         (file) => file.type === "application/pdf",
       );
 
-     if (isNewPdf && acceptedFiles.length > 1) {
-  toast.error("Only one PDF can be uploaded at a time.", {
-    id: toastId,
-  });
-  return;
-}
+      if (isNewPdf && acceptedFiles.length > 1) {
+        toast.error("Only one PDF can be uploaded at a time.", {
+          id: toastId,
+        });
+        return;
+      }
 
-if (isNewPdf && hasExistingImages) {
-  toast.error("PDFs cannot be uploaded together with images.", {
-    id: toastId,
-  });
-  return;
-}
+      if (isNewPdf && hasExistingImages) {
+        toast.error("PDFs cannot be uploaded together with images.", {
+          id: toastId,
+        });
+        return;
+      }
 
-if (isNewPdf && hasExistingPdf) {
-  toast.error("Only one PDF is allowed. You’ve already uploaded a PDF.", {
-    id: toastId,
-  });
-  return;
-}
+      if (isNewPdf && hasExistingPdf) {
+        toast.error("Only one PDF is allowed. You’ve already uploaded a PDF.", {
+          id: toastId,
+        });
+        return;
+      }
 
-if (!isNewPdf && hasExistingPdf) {
-  toast.error("Images cannot be uploaded after a PDF. Upload them separately.", {
-    id: toastId,
-  });
-  return;
-} 
+      if (!isNewPdf && hasExistingPdf) {
+        toast.error(
+          "Images cannot be uploaded after a PDF. Upload them separately.",
+          {
+            id: toastId,
+          },
+        );
+        return;
+      }
 
       const allFiles = [...files, ...acceptedFiles];
       if (allFiles.length > 5) {
@@ -282,7 +285,6 @@ if (!isNewPdf && hasExistingPdf) {
 
       clearAllFiles();
     } catch (error) {
-      
     } finally {
       setIsUploading(false);
     }
@@ -291,7 +293,7 @@ if (!isNewPdf && hasExistingPdf) {
   return (
     <main className="mx-auto max-w-3xl px-4 py-8">
       <div className="flex h-[calc(100vh-90px)] flex-col justify-center px-6 font-play">
-        <div className="2xl:my-15 flex flex-col items-center">
+        <div className="2xl:my-15 flex flex-col ">
           {previews.length === 0 && (
             <fieldset className="mb-4 w-full max-w-md rounded-lg border-2 border-gray-300 p-4 pr-8">
               <div className="flex w-full flex-col 2xl:gap-y-4">
@@ -346,9 +348,9 @@ if (!isNewPdf && hasExistingPdf) {
                         </div>
                         <div className="mt-4 text-sm text-gray-500">
                           Note: Uploaded papers are first reviewed by our team
-                          before appearing on the website. If your paper doesn&apos;t
-                          show up immediately, please be patient, it&apos;s likely
-                          still under review.
+                          before appearing on the website. If your paper
+                          doesn&apos;t show up immediately, please be patient,
+                          it&apos;s likely still under review.
                         </div>
                       </section>
                     )}
@@ -362,6 +364,33 @@ if (!isNewPdf && hasExistingPdf) {
             </fieldset>
           )}
 
+          <Dropzone
+            onDrop={onDrop}
+            accept={{
+              "image/*": [".jpeg", ".jpg", ".png", ".gif", ".bmp", ".webp"],
+              "application/pdf": [".pdf"],
+            }}
+            multiple={true}
+          >
+            {({ getRootProps, getInputProps }) => (
+              <div
+                className="relative h-20 w-20 flex-shrink-0 cursor-pointer"
+                {...getRootProps()}
+              >
+                <input {...getInputProps()} />
+                <div className="absolute left-4 top-4 h-16 w-16 rounded-2xl bg-violet-950" />
+                <div className="absolute left-0 top-0 h-10 w-10 rounded-[20px] bg-violet-950" />
+                <div className="absolute left-1 top-1 flex h-8 w-8 items-center rounded-[20px] bg-black/50" />
+                <div className="absolute left-9 top-9 text-2xl text-white">
+                  <FiPlus className="h-7 w-7" />
+                </div>
+                <div className="absolute left-4 top-3 text-xs font-semibold text-white">
+                  {previews.length}
+                </div>
+              </div>
+            )}
+          </Dropzone>
+
           {previews.length > 0 && (
             <section className="mt-6 flex w-full flex-col items-center">
               <div className="flex w-max gap-4">
@@ -425,40 +454,6 @@ if (!isNewPdf && hasExistingPdf) {
                             </div>
                           </SortablePreview>
                         ))}
-
-                        <Dropzone
-                          onDrop={onDrop}
-                          accept={{
-                            "image/*": [
-                              ".jpeg",
-                              ".jpg",
-                              ".png",
-                              ".gif",
-                              ".bmp",
-                              ".webp",
-                            ],
-                            "application/pdf": [".pdf"],
-                          }}
-                          multiple={true}
-                        >
-                          {({ getRootProps, getInputProps }) => (
-                            <div
-                              className="relative h-20 w-20 flex-shrink-0 cursor-pointer"
-                              {...getRootProps()}
-                            >
-                              <input {...getInputProps()} />
-                              <div className="absolute left-4 top-4 h-16 w-16 rounded-2xl bg-violet-950" />
-                              <div className="absolute left-0 top-0 h-10 w-10 rounded-[20px] bg-violet-950" />
-                              <div className="absolute left-1 top-1 flex h-8 w-8 items-center rounded-[20px] bg-black/50" />
-                              <div className="absolute left-9 top-9 text-2xl text-white">
-                                <FiPlus className="h-7 w-7" />
-                              </div>
-                              <div className="absolute left-4 top-3 text-xs font-semibold text-white">
-                                {previews.length}
-                              </div>
-                            </div>
-                          )}
-                        </Dropzone>
                       </div>{" "}
                       {previews.length > 2 && (
                         <div className="text-l mt-4 text-right text-white/50">