File Input

<FormField
              control={form.control}
              name="select_file"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Select File</FormLabel>
                  <FormControl>
                    <FileUploader
                      value={filesByField["select_file"] ?? null}
                      onValueChange={(nextFiles) => {
                        setFilesByField((current) => ({
                          ...current,
                          ["select_file"]: nextFiles
                        }))
                        field.onChange((nextFiles ?? []).map((file) => file.name))
                      }}
                      dropzoneOptions={{
                        ...dropZoneConfig,
                        minFiles: 1,
                        maxFiles: 1,
                        multiple: false,
                        accept: {"image/svg+xml":[".svg"],"image/png":[".png"],"image/jpeg":[".jpg",".jpeg"],"image/gif":[".gif"],"image/webp":[".webp"],"application/pdf":[".pdf"],"application/msword":[".doc"],"application/vnd.openxmlformats-officedocument.wordprocessingml.document":[".docx"],"application/vnd.ms-excel":[".xls"],"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":[".xlsx"],"application/vnd.ms-powerpoint":[".ppt"],"application/vnd.openxmlformats-officedocument.presentationml.presentation":[".pptx"],"text/plain":[".txt"],"text/csv":[".csv"],"application/zip":[".zip"],"application/x-zip-compressed":[".zip"],"audio/mpeg":[".mp3"],"video/mp4":[".mp4"]}
                      }}
                      className="relative bg-background rounded-lg p-2"
                    >
                      <FileInput
                        id="select_file_file_input"
                        className="outline-dashed outline-1 outline-border"
                      >
                        <div className="flex items-center justify-center flex-col p-8 w-full ">
                          <CloudUpload className='text-gray-500 w-10 h-10' />
                          <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
                            <span className="font-semibold">Click to upload</span>
                            &nbsp; or drag and drop
                          </p>
                          <p className="w-full px-2 text-center text-xs text-gray-500 dark:text-gray-400">
                            {"SVG, PNG, JPG, GIF, WEBP, PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, CSV, ZIP, MP3 or MP4"}
                          </p>
                        </div>
                      </FileInput>
                      <FileUploaderContent>
                        {(filesByField["select_file"] ?? []).length > 0 &&
                          (filesByField["select_file"] ?? []).map((file, i) => (
                            <FileUploaderItem key={i} index={i}>
                              <Paperclip className="h-4 w-4 stroke-current" />
                              <span>{file.name}</span>
                            </FileUploaderItem>
                          ))}
                      </FileUploaderContent>
                    </FileUploader>
                  </FormControl>
                  <FormDescription>Select a file to upload.</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />