fix: error on multiple files upload

src/app/business/apply/page.tsx

@@ -7,12 +7,7 @@ import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm } from "react-hook-form";
-import {
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DualOptionSelector } from "@/components/dualSelector";
@@ -62,10 +57,9 @@ export default function Apply() {
     }
   };
   const imageSchema = z
-    .custom<File>(
+    .custom<File>((val) => val && typeof val === "object" && "size" in val && "type" in val, {
-      (val) => val && typeof val === "object" && "size" in val && "type" in val,
+      message: "Input must be a file.",
-      { message: "Input must be a file." }
+    })
-    )
     .refine((file) => file.size < MAX_FILE_SIZE, {
       message: "File can't be bigger than 5MB.",
     })
@@ -90,9 +84,19 @@ export default function Apply() {
     projectPitchDeck: createPitchDeckSchema(projectPitch),
     projectLogo: imageSchema,
 
-    projectPhotos: z
+    projectPhotos: z.custom(
-      .array(z.instanceof(File))
+      (value) => {
-      .min(1, "At least one project photo is required"),
+        console.log("Tozod", value);
+        if (value instanceof FileList || Array.isArray(value)) {
+          if (value.length === 1) {
+            return false;
+          }
+          return Array.from(value).every((item) => item instanceof File);
+        }
+        return false;
+      },
+      { message: "Must be a FileList or an array of File objects with at least one file." }
+    ),
     minInvest: z
       .number({
         required_error: "Minimum invesment must be a number.",
@@ -179,15 +183,7 @@ export default function Apply() {
     resolver: zodResolver(projectFormSchema),
   });
 
-  const communitySize = [
+  const communitySize = ["N/A", "0-5K", "5-10K", "10-20K", "20-50K", "50-100K", "100K+"];
-    "N/A",
-    "0-5K",
-    "5-10K",
-    "10-20K",
-    "20-50K",
-    "50-100K",
-    "100K+",
-  ];
 
   useEffect(() => {
     register("industry");
@@ -199,6 +195,7 @@ export default function Apply() {
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       const filesArray = Array.from(event.target.files);
+      console.log("first file", filesArray);
       setSelectedImages((prevImages) => {
         const updatedImages = [...prevImages, ...filesArray];
         console.log("Updated Images Array:", updatedImages);
@@ -227,8 +224,7 @@ export default function Apply() {
 
   const transformChoice = (data: any) => {
     // convert any yes and no to true or false
-    const transformedData = Object.entries(data).reduce(
+    const transformedData = Object.entries(data).reduce((acc: Record<any, any>, [key, value]) => {
-      (acc: Record<any, any>, [key, value]) => {
       if (typeof value === "string") {
         const lowerValue = value.toLowerCase();
         if (lowerValue === "yes") {
@@ -242,9 +238,7 @@ export default function Apply() {
         acc[key] = value; // keep other types unchanged
       }
       return acc;
-      },
+    }, {});
-      {}
-    );
     return transformedData;
   };
   const handleBusinessPitchChange = (type: string) => {
@@ -274,9 +268,7 @@ export default function Apply() {
   };
 
   const fetchIndustry = async () => {
-    let { data: BusinessType, error } = await supabase
+    let { data: BusinessType, error } = await supabase.from("business_type").select("value");
-      .from("business_type")
-      .select("value");
 
     if (error) {
       console.error(error);
@@ -319,9 +311,7 @@ export default function Apply() {
     }
   };
   const fetchProjectType = async () => {
-    let { data: ProjectType, error } = await supabase
+    let { data: ProjectType, error } = await supabase.from("project_type").select("value");
-      .from("project_type")
-      .select("value");
 
     if (error) {
       console.error(error);
@@ -344,12 +334,10 @@ export default function Apply() {
         </h1>
         <div className="mt-5 justify-self-center">
           <p className="text-sm md:text-base text-neutral-500">
-            All information submitted in this application is for internal use
+            All information submitted in this application is for internal use only and is treated with the utmost{" "}
-            only and is treated with the utmost{" "}
           </p>
           <p className="text-sm md:text-base text-neutral-500">
-            confidentiality. Companies may apply to raise with B2DVentures more
+            confidentiality. Companies may apply to raise with B2DVentures more than once.
-            than once.
           </p>
         </div>
       </div>
@@ -358,8 +346,7 @@ export default function Apply() {
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
-            <span className="text-red-500 font-bold">**</span>All requested
+            <span className="text-red-500 font-bold">**</span>All requested information in this section is required.
-            information in this section is required.
           </p>
 
           {/* company name */}
@@ -369,12 +356,7 @@ export default function Apply() {
                 Company name
               </Label>
               <div className="flex space-x-5">
-                <Input
+                <Input type="text" id="companyName" className="w-96" {...register("companyName")} />
-                  type="text"
-                  id="companyName"
-                  className="w-96"
-                  {...register("companyName")}
-                />
                 <span className="text-[12px] text-neutral-500 self-center">
                   This should be the name your company uses on your <br />
                   website and in the market.
@@ -383,9 +365,7 @@ export default function Apply() {
               {errorsBusiness.companyName && (
                 <p className="text-red-500 text-sm">
                   {errorsBusiness.companyName && (
-                    <p className="text-red-500 text-sm">
+                    <p className="text-red-500 text-sm">{errorsBusiness.companyName.message as string}</p>
-                      {errorsBusiness.companyName.message as string}
-                    </p>
                   )}
                 </p>
               )}
@@ -397,16 +377,12 @@ export default function Apply() {
               fieldName="industry"
               choices={industry}
               handleFunction={handleBusinessFieldChange}
-              description={
+              description={<>Choose the industry that best aligns with your business.</>}
-                <>Choose the industry that best aligns with your business.</>
-              }
               placeholder="Select an industry"
               selectLabel="Industry"
             />
             {errorsBusiness.industry && (
-              <p className="text-red-500 text-sm">
+              <p className="text-red-500 text-sm">{errorsBusiness.industry.message as string}</p>
-                {errorsBusiness.industry.message as string}
-              </p>
             )}
             {/* How much money has your company raised to date? */}
             <div className="space-y-5">
@@ -424,15 +400,12 @@ export default function Apply() {
                   })}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
-                  The sum total of past financing, including angel or venture{" "}
+                  The sum total of past financing, including angel or venture <br />
-                  <br />
                   capital, loans, grants, or token sales.
                 </span>
               </div>
               {errorsBusiness.totalRaised && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsBusiness.totalRaised.message as string}</p>
-                  {errorsBusiness.totalRaised.message as string}
-                </p>
               )}
             </div>
             {/* Is your company incorporated in the United States? */}
@@ -449,20 +422,14 @@ export default function Apply() {
               handleFunction={handleBusinessFieldChange}
               description={
                 <>
-                  Only companies that are incorporated or formed in the US are{" "}
+                  Only companies that are incorporated or formed in the US are <br />
-                  <br />
+                  eligible to raise via Reg CF. If your company is incorporated <br />
-                  eligible to raise via Reg CF. If your company is incorporated{" "}
-                  <br />
                   outside the US, we still encourage you to apply.
                 </>
               }
               value={isInUS}
             />
-            {errorsBusiness.isInUS && (
+            {errorsBusiness.isInUS && <p className="text-red-500 text-sm">{errorsBusiness.isInUS.message as string}</p>}
-              <p className="text-red-500 text-sm">
-                {errorsBusiness.isInUS.message as string}
-              </p>
-            )}
 
             {/* Is your product available (for sale) in market? */}
             <DualOptionSelector
@@ -478,17 +445,14 @@ export default function Apply() {
               handleFunction={handleBusinessFieldChange}
               description={
                 <>
-                  Only check this box if customers can access, use, or buy your{" "}
+                  Only check this box if customers can access, use, or buy your <br />
-                  <br />
                   product today.
                 </>
               }
               value={isForSale}
             />
             {errorsBusiness.isForSale && (
-              <p className="text-red-500 text-sm">
+              <p className="text-red-500 text-sm">{errorsBusiness.isForSale.message as string}</p>
-                {errorsBusiness.isForSale.message as string}
-              </p>
             )}
 
             {/* Is your company generating revenue?*/}
@@ -507,9 +471,7 @@ export default function Apply() {
               value={isGenerating}
             />
             {errorsBusiness.isGenerating && (
-              <p className="text-red-500 text-sm">
+              <p className="text-red-500 text-sm">{errorsBusiness.isGenerating.message as string}</p>
-                {errorsBusiness.isGenerating.message as string}
-              </p>
             )}
             {/* Pitch deck */}
             <div className="space-y-5">
@@ -521,16 +483,14 @@ export default function Apply() {
                   type="button"
                   variant={businessPitch === "text" ? "default" : "outline"}
                   onClick={() => handleBusinessPitchChange("text")}
-                  className="w-32 h-12 text-base"
+                  className="w-32 h-12 text-base">
-                >
                   Paste URL
                 </Button>
                 <Button
                   type="button"
                   variant={businessPitch === "file" ? "default" : "outline"}
                   onClick={() => handleBusinessPitchChange("file")}
-                  className="w-32 h-12 text-base"
+                  className="w-32 h-12 text-base">
-                >
                   Upload a file
                 </Button>
               </div>
@@ -539,11 +499,7 @@ export default function Apply() {
                   type={businessPitch === "file" ? "file" : "text"}
                   id="pitchDeck"
                   className="w-96"
-                  placeholder={
+                  placeholder={businessPitch === "file" ? "Upload your Markdown file" : "https:// "}
-                    businessPitch === "file"
-                      ? "Upload your Markdown file"
-                      : "https:// "
-                  }
                   accept={businessPitch === "file" ? ".md" : undefined}
                   // if text use normal register
                   {...(businessPitch === "text"
@@ -557,16 +513,12 @@ export default function Apply() {
                       })}
                 />
                 <span className="text-[12px] text-neutral-500 self-center">
-                  Your pitch deck and other application info will be used for{" "}
+                  Your pitch deck and other application info will be used for <br />
-                  <br />
                   internal purposes only. <br />
-                  Please make sure this document is publicly accessible. This
+                  Please make sure this document is publicly accessible. This can <br />
-                  can <br />
                   be a DocSend, Box, Dropbox, Google Drive or other link.
                   <br />
-                  <p className="text-red-500">
+                  <p className="text-red-500">** support only markdown(.md) format</p>
-                    ** support only markdown(.md) format
-                  </p>
                 </span>
               </div>
               {/* box to show file name */}
@@ -578,17 +530,14 @@ export default function Apply() {
                     onClick={() => {
                       setValueBusiness("businessPitchDeck", null);
                       setBusinessPitchFile("");
-                    }}
+                    }}>
-                  >
                     Remove
                   </Button>
                 </div>
               )}
             </div>
             {errorsBusiness.businessPitchDeck && (
-              <p className="text-red-500 text-sm">
+              <p className="text-red-500 text-sm">{errorsBusiness.businessPitchDeck.message as string}</p>
-                {errorsBusiness.businessPitchDeck.message as string}
-              </p>
             )}
             <MultipleOptionSelector
               header={
@@ -602,38 +551,30 @@ export default function Apply() {
               description={
                 <>
                   {" "}
-                  Include your email list, social media following (i.e.
+                  Include your email list, social media following (i.e. Instagram, <br /> Discord, Facebook, Twitter,
-                  Instagram, <br /> Discord, Facebook, Twitter, TikTok). We’d
+                  TikTok). We’d like to understand the <br /> rough size of your current audience.
-                  like to understand the <br /> rough size of your current
-                  audience.
                 </>
               }
               placeholder="Select"
               selectLabel="Select"
             />
             {errorsBusiness.communitySize && (
-              <p className="text-red-500 text-sm">
+              <p className="text-red-500 text-sm">{errorsBusiness.communitySize.message as string}</p>
-                {errorsBusiness.communitySize.message as string}
-              </p>
             )}
 
             <div className="flex space-x-5">
-              <Switch
+              <Switch onCheckedChange={() => setApplyProject(!applyProject)}></Switch>
-                onCheckedChange={() => setApplyProject(!applyProject)}
-              ></Switch>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <span className="text-[12px] text-neutral-500 self-center cursor-pointer">
-                      Would you like to apply for your first fundraising project
+                      Would you like to apply for your first fundraising project as well?
-                      as well?
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p className="text-[11px]">
-                      Toggling this option allows you to begin your first
+                      Toggling this option allows you to begin your first project, <br /> which is crucial for unlocking
-                      project, <br /> which is crucial for unlocking the tools
+                      the tools necessary to raise funds.
-                      necessary to raise funds.
                     </p>
                   </TooltipContent>
                 </Tooltip>
@@ -647,14 +588,10 @@ export default function Apply() {
           <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
             {/* header */}
             <div className="ml-[15%]">
-              <h1 className="text-3xl font-bold mt-10">
+              <h1 className="text-3xl font-bold mt-10">Begin Your First Fundraising Project</h1>
-                Begin Your First Fundraising Project
-              </h1>
               <p className="mt-3 text-sm text-neutral-500">
-                Starting a fundraising project is mandatory for all businesses.
+                Starting a fundraising project is mandatory for all businesses. This step is crucial <br />
-                This step is crucial <br />
+                to begin your journey and unlock the necessary tools for raising funds.
-                to begin your journey and unlock the necessary tools for raising
-                funds.
               </p>
               {/* project's name */}
               <div className="mt-10 space-y-5">
@@ -662,18 +599,11 @@ export default function Apply() {
                   Project name
                 </Label>
                 <div className="flex space-x-5">
-                  <Input
+                  <Input type="text" id="projectName" className="w-96" {...registerSecondForm("projectName")} />
-                    type="text"
-                    id="projectName"
-                    className="w-96"
-                    {...registerSecondForm("projectName")}
-                  />
                 </div>
               </div>
               {errorsProject.projectName && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.projectName.message as string}</p>
-                  {errorsProject.projectName.message as string}
-                </p>
               )}
               {/* project type */}
               <MultipleOptionSelector
@@ -681,16 +611,12 @@ export default function Apply() {
                 fieldName="projectType"
                 choices={projectType}
                 handleFunction={handleProjectFieldChange}
-                description={
+                description={<>Please specify the primary purpose of the funds</>}
-                  <>Please specify the primary purpose of the funds</>
-                }
                 placeholder="Select a Project type"
                 selectLabel="Project type"
               />
               {errorsProject.projectType && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.projectType.message as string}</p>
-                  {errorsProject.projectType.message as string}
-                </p>
               )}
               {/* short description */}
               <div className="mt-10 space-y-5">
@@ -698,21 +624,14 @@ export default function Apply() {
                   Short description
                 </Label>
                 <div className="flex space-x-5">
-                  <Textarea
+                  <Textarea id="shortDescription" className="w-96" {...registerSecondForm("shortDescription")} />
-                    id="shortDescription"
-                    className="w-96"
-                    {...registerSecondForm("shortDescription")}
-                  />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    Could you provide a brief description of your project <br />{" "}
+                    Could you provide a brief description of your project <br /> in one or two sentences?
-                    in one or two sentences?
                   </span>
                 </div>
               </div>
               {errorsProject.shortDescription && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.shortDescription.message as string}</p>
-                  {errorsProject.shortDescription.message as string}
-                </p>
               )}
               {/* Pitch deck */}
               <div className="mt-10 space-y-5">
@@ -724,16 +643,14 @@ export default function Apply() {
                     type="button"
                     variant={projectPitch === "text" ? "default" : "outline"}
                     onClick={() => setProjectPitch("text")}
-                    className="w-32 h-12 text-base"
+                    className="w-32 h-12 text-base">
-                  >
                     Paste URL
                   </Button>
                   <Button
                     type="button"
                     variant={projectPitch === "file" ? "default" : "outline"}
                     onClick={() => setProjectPitch("file")}
-                    className="w-32 h-12 text-base"
+                    className="w-32 h-12 text-base">
-                  >
                     Upload a file
                   </Button>
                 </div>
@@ -742,11 +659,7 @@ export default function Apply() {
                     type={projectPitch}
                     id="projectPitchDeck"
                     className="w-96"
-                    placeholder={
+                    placeholder={projectPitch === "file" ? "Upload your Markdown file" : "https:// "}
-                      projectPitch === "file"
-                        ? "Upload your Markdown file"
-                        : "https:// "
-                    }
                     accept={projectPitch === "file" ? ".md" : undefined}
                     {...(projectPitch === "text"
                       ? registerSecondForm("projectPitchDeck", {
@@ -761,11 +674,9 @@ export default function Apply() {
                         })}
                   />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    Please upload a file or paste a link to your pitch, which
+                    Please upload a file or paste a link to your pitch, which should <br />
-                    should <br />
+                    cover key aspects of your project: what it will do, what investors <br /> can expect to gain, and
-                    cover key aspects of your project: what it will do, what
+                    any highlights that make it stand out.
-                    investors <br /> can expect to gain, and any highlights that
-                    make it stand out.
                   </span>
                 </div>
                 {projectPitchFile && (
@@ -776,24 +687,18 @@ export default function Apply() {
                       onClick={() => {
                         setValueProject("projectPitchDeck", "");
                         setProjectPitchFile("");
-                      }}
+                      }}>
-                    >
                       Remove
                     </Button>
                   </div>
                 )}
               </div>
               {errorsProject.projectPitchDeck && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.projectPitchDeck.message as string}</p>
-                  {errorsProject.projectPitchDeck.message as string}
-                </p>
               )}
               {/* project logo */}
               <div className="mt-10 space-y-5">
-                <Label
+                <Label htmlFor="projectLogo" className="font-bold text-lg mt-10">
-                  htmlFor="projectLogo"
-                  className="font-bold text-lg mt-10"
-                >
                   Project logo
                 </Label>
                 <div className="flex space-x-5">
@@ -810,21 +715,15 @@ export default function Apply() {
                     }}
                   />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    Please upload the logo picture that best represents your
+                    Please upload the logo picture that best represents your project.
-                    project.
                   </span>
                 </div>
               </div>
               {errorsProject.projectLogo && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.projectLogo.message as string}</p>
-                  {errorsProject.projectLogo.message as string}
-                </p>
               )}
               <div className="mt-10 space-y-5">
-                <Label
+                <Label htmlFor="projectPhotos" className="font-bold text-lg mt-10">
-                  htmlFor="projectPhotos"
-                  className="font-bold text-lg mt-10"
-                >
                   Project photos
                 </Label>
                 <div className="flex space-x-5">
@@ -834,31 +733,21 @@ export default function Apply() {
                     multiple
                     accept="image/*"
                     className="w-96"
-                    value={selectedImages.length === 0 ? "" : undefined}
                     {...registerSecondForm("projectPhotos", {
                       required: true,
                       onChange: handleFileChange,
                     })}
                   />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    Feel free to upload any additional images that provide{" "}
+                    Feel free to upload any additional images that provide <br />
-                    <br />
                     further insight into your project.
                   </span>
                 </div>
                 <div className="mt-5 space-y-2 w-96">
                   {selectedImages.map((image, index) => (
-                    <div
+                    <div key={index} className="flex justify-between items-center border p-2 rounded">
-                      key={index}
-                      className="flex justify-between items-center border p-2 rounded"
-                    >
                       <span>{image.name}</span>
-                      <Button
+                      <Button variant="outline" onClick={() => handleRemoveImage(index)} className="ml-4" type="reset">
-                        variant="outline"
-                        onClick={() => handleRemoveImage(index)}
-                        className="ml-4"
-                        type="reset"
-                      >
                         Remove
                       </Button>
                     </div>
@@ -866,9 +755,7 @@ export default function Apply() {
                 </div>
               </div>
               {errorsProject.projectPhotos && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.projectPhotos.message as string}</p>
-                  {errorsProject.projectPhotos.message as string}
-                </p>
               )}
               {/*  Minimum Investment */}
               <div className="space-y-5 mt-10">
@@ -891,9 +778,7 @@ export default function Apply() {
                 </div>
               </div>
               {errorsProject.minInvest && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.minInvest.message as string}</p>
-                  {errorsProject.minInvest.message as string}
-                </p>
               )}
               {/* Target Investment */}
               <div className="space-y-5 mt-10">
@@ -911,15 +796,12 @@ export default function Apply() {
                     })}
                   />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    We encourage you to set a specific target investment <br />{" "}
+                    We encourage you to set a specific target investment <br /> amount that reflects your funding goals.
-                    amount that reflects your funding goals.
                   </span>
                 </div>
               </div>
               {errorsProject.targetInvest && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.targetInvest.message as string}</p>
-                  {errorsProject.targetInvest.message as string}
-                </p>
               )}
               {/* Deadline */}
               <div className="space-y-5 mt-10">
@@ -927,33 +809,22 @@ export default function Apply() {
                   Deadline
                 </Label>
                 <div className="flex space-x-5">
-                  <Input
+                  <Input type="datetime-local" id="deadline" className="w-96" {...registerSecondForm("deadline")} />
-                    type="datetime-local"
-                    id="deadline"
-                    className="w-96"
-                    {...registerSecondForm("deadline")}
-                  />
                   <span className="text-[12px] text-neutral-500 self-center">
-                    What is the deadline for your fundraising project? Setting{" "}
+                    What is the deadline for your fundraising project? Setting <br /> a clear timeline can help motivate
-                    <br /> a clear timeline can help motivate potential
+                    potential investors.
-                    investors.
                   </span>
                 </div>
               </div>
               {errorsProject.deadline && (
-                <p className="text-red-500 text-sm">
+                <p className="text-red-500 text-sm">{errorsProject.deadline.message as string}</p>
-                  {errorsProject.deadline.message as string}
-                </p>
               )}
             </div>
           </div>
         )}
         {/* Submit */}
         <center>
-          <Button
+          <Button className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5" type="submit">
-            className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-            type="submit"
-          >
             Submit application
           </Button>
         </center>