File handling cleanup (#3240)

* fix google sites connector

* minior cleanup

* rm comments

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -115,7 +115,6 @@ export default function AddConnector({
   // State for managing credentials and files
   const [currentCredential, setCurrentCredential] =
     useState<Credential<any> | null>(null);
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [createConnectorToggle, setCreateConnectorToggle] = useState(false);
 
   // Fetch credentials data
@@ -258,6 +257,13 @@ export default function AddConnector({
           refreshFreq: (refreshFreq ?? defaultRefreshFreqMinutes) * 60,
         };
 
+        // File-specific handling
+        const selectedFiles = Array.isArray(values.file_locations)
+          ? values.file_locations
+          : values.file_locations
+            ? [values.file_locations]
+            : [];
+
         // Google sites-specific handling
         if (connector == "google_sites") {
           const response = await submitGoogleSite(
@@ -276,13 +282,11 @@ export default function AddConnector({
           }
           return;
         }
-
         // File-specific handling
-        if (connector == "file" && selectedFiles.length > 0) {
+        if (connector == "file") {
           const response = await submitFiles(
             selectedFiles,
             setPopup,
-            setSelectedFiles,
             name,
             access_type,
             groups
@@ -427,8 +431,6 @@ export default function AddConnector({
                 <DynamicConnectionForm
                   values={formikProps.values}
                   config={configuration}
-                  setSelectedFiles={setSelectedFiles}
-                  selectedFiles={selectedFiles}
                   connector={connector}
                   currentCredential={
                     currentCredential ||

web/src/app/admin/connectors/[connector]/pages/ConnectorInput/FileInput.tsx

@@ -7,6 +7,7 @@ interface FileInputProps {
   label: string;
   optional?: boolean;
   description?: string;
+  isZip?: boolean;
 }
 
 export default function FileInput({
@@ -14,6 +15,7 @@ export default function FileInput({
   label,
   optional = false,
   description,
+  isZip = false, // Default to false for multiple file uploads
 }: FileInputProps) {
   const [field, meta, helpers] = useField(name);
 
@@ -28,10 +30,22 @@ export default function FileInput({
       </label>
       {description && <CredentialSubText>{description}</CredentialSubText>}
       <FileUpload
-        selectedFiles={field.value ? [field.value] : []}
+        selectedFiles={
+          Array.isArray(field.value)
+            ? field.value
+            : field.value
+              ? [field.value]
+              : []
+        }
         setSelectedFiles={(files: File[]) => {
-          helpers.setValue(files[0] || null);
+          if (isZip) {
+            helpers.setValue(files[0] || null);
+          } else {
+            helpers.setValue(files);
+          }
         }}
+        multiple={!isZip} // Allow multiple files if not a zip
+        accept={isZip ? ".zip" : undefined} // Only accept zip files if isZip is true
       />
       {meta.touched && meta.error && (
         <div className="text-red-500 text-sm mt-1">{meta.error}</div>

web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx

@@ -11,8 +11,6 @@ import { RenderField } from "./FieldRendering";
 
 export interface DynamicConnectionFormProps {
   config: ConnectionConfiguration;
-  selectedFiles: File[];
-  setSelectedFiles: Dispatch<SetStateAction<File[]>>;
   values: any;
   connector: ConfigurableSources;
   currentCredential: Credential<any> | null;
@@ -20,8 +18,6 @@ export interface DynamicConnectionFormProps {
 
 const DynamicConnectionForm: FC<DynamicConnectionFormProps> = ({
   config,
-  selectedFiles,
-  setSelectedFiles,
   values,
   connector,
   currentCredential,
@@ -48,8 +44,6 @@ const DynamicConnectionForm: FC<DynamicConnectionFormProps> = ({
               key={field.name}
               field={field}
               values={values}
-              selectedFiles={selectedFiles}
-              setSelectedFiles={setSelectedFiles}
               connector={connector}
               currentCredential={currentCredential}
             />
@@ -73,8 +67,6 @@ const DynamicConnectionForm: FC<DynamicConnectionFormProps> = ({
                     key={field.name}
                     field={field}
                     values={values}
-                    selectedFiles={selectedFiles}
-                    setSelectedFiles={setSelectedFiles}
                     connector={connector}
                     currentCredential={currentCredential}
                   />

web/src/app/admin/connectors/[connector]/pages/FieldRendering.tsx

@@ -20,8 +20,6 @@ import {
 interface TabsFieldProps {
   tabField: TabOption;
   values: any;
-  selectedFiles: File[];
-  setSelectedFiles: Dispatch<SetStateAction<File[]>>;
   connector: ConfigurableSources;
   currentCredential: Credential<any> | null;
 }
@@ -29,8 +27,6 @@ interface TabsFieldProps {
 const TabsField: FC<TabsFieldProps> = ({
   tabField,
   values,
-  selectedFiles,
-  setSelectedFiles,
   connector,
   currentCredential,
 }) => {
@@ -101,8 +97,6 @@ const TabsField: FC<TabsFieldProps> = ({
                     key={subField.name}
                     field={subField}
                     values={values}
-                    selectedFiles={selectedFiles}
-                    setSelectedFiles={setSelectedFiles}
                     connector={connector}
                     currentCredential={currentCredential}
                   />
@@ -119,8 +113,6 @@ const TabsField: FC<TabsFieldProps> = ({
 interface RenderFieldProps {
   field: any;
   values: any;
-  selectedFiles: File[];
-  setSelectedFiles: Dispatch<SetStateAction<File[]>>;
   connector: ConfigurableSources;
   currentCredential: Credential<any> | null;
 }
@@ -128,8 +120,6 @@ interface RenderFieldProps {
 export const RenderField: FC<RenderFieldProps> = ({
   field,
   values,
-  selectedFiles,
-  setSelectedFiles,
   connector,
   currentCredential,
 }) => {
@@ -147,8 +137,6 @@ export const RenderField: FC<RenderFieldProps> = ({
       <TabsField
         tabField={field}
         values={values}
-        selectedFiles={selectedFiles}
-        setSelectedFiles={setSelectedFiles}
         connector={connector}
         currentCredential={currentCredential}
       />
@@ -157,15 +145,10 @@ export const RenderField: FC<RenderFieldProps> = ({
 
   const fieldContent = (
     <>
-      {field.type === "file" ? (
+      {field.type === "zip" || field.type === "file" ? (
-        <FileUpload
-          name={field.name}
-          selectedFiles={selectedFiles}
-          setSelectedFiles={setSelectedFiles}
-        />
-      ) : field.type === "zip" ? (
         <FileInput
           name={field.name}
+          isZip={field.type === "zip"}
           label={label}
           optional={field.optional}
           description={description}

web/src/app/admin/connectors/[connector]/pages/utils/files.ts

@@ -7,7 +7,6 @@ import { AccessType } from "@/lib/types";
 export const submitFiles = async (
   selectedFiles: File[],
   setPopup: (popup: PopupSpec) => void,
-  setSelectedFiles: (files: File[]) => void,
   name: string,
   access_type: string,
   groups?: number[]
@@ -102,7 +101,6 @@ export const submitFiles = async (
     return false;
   }
 
-  setSelectedFiles([]);
   setPopup({
     type: "success",
     message: "Successfully uploaded files!",

web/src/components/admin/connectors/FileUpload.tsx

@@ -8,6 +8,8 @@ interface FileUploadProps {
   setSelectedFiles: (files: File[]) => void;
   message?: string;
   name?: string;
+  multiple?: boolean;
+  accept?: string;
 }
 
 export const FileUpload: FC<FileUploadProps> = ({
@@ -15,6 +17,8 @@ export const FileUpload: FC<FileUploadProps> = ({
   selectedFiles,
   setSelectedFiles,
   message,
+  multiple = true,
+  accept,
 }) => {
   const [dragActive, setDragActive] = useState(false);
   const { setFieldValue } = useFormikContext();
@@ -23,14 +27,17 @@ export const FileUpload: FC<FileUploadProps> = ({
     <div>
       <Dropzone
         onDrop={(acceptedFiles) => {
-          setSelectedFiles(acceptedFiles);
+          const filesToSet = multiple ? acceptedFiles : [acceptedFiles[0]];
+          setSelectedFiles(filesToSet);
           setDragActive(false);
           if (name) {
-            setFieldValue(name, acceptedFiles);
+            setFieldValue(name, multiple ? filesToSet : filesToSet[0]);
           }
         }}
         onDragLeave={() => setDragActive(false)}
         onDragEnter={() => setDragActive(true)}
+        multiple={multiple}
+        accept={accept ? { [accept]: [] } : undefined}
       >
         {({ getRootProps, getInputProps }) => (
           <section>
@@ -45,7 +52,9 @@ export const FileUpload: FC<FileUploadProps> = ({
               <input {...getInputProps()} />
               <b className="text-emphasis">
                 {message ||
-                  "Drag and drop some files here, or click to select files"}
+                  `Drag and drop ${
+                    multiple ? "some files" : "a file"
+                  } here, or click to select ${multiple ? "files" : "a file"}`}
               </b>
             </div>
           </section>
@@ -54,7 +63,9 @@ export const FileUpload: FC<FileUploadProps> = ({
 
       {selectedFiles.length > 0 && (
         <div className="mt-4">
-          <h2 className="text-sm font-bold">Selected Files</h2>
+          <h2 className="text-sm font-bold">
+            Selected File{multiple ? "s" : ""}
+          </h2>
           <ul>
             {selectedFiles.map((file) => (
               <div key={file.name} className="flex">

web/src/lib/connectors/connectors.tsx

@@ -6,7 +6,7 @@ import { Credential } from "@/lib/connectors/credentials"; // Import Credential
 
 export function isLoadState(connector_name: string): boolean {
   // TODO: centralize connector metadata like this somewhere instead of hardcoding it here
-  const loadStateConnectors = ["web", "xenforo"];
+  const loadStateConnectors = ["web", "xenforo", "file"];
   if (loadStateConnectors.includes(connector_name)) {
     return true;
   }
@@ -78,11 +78,6 @@ export interface FileOption extends Option {
   default?: string;
 }
 
-export interface ZipOption extends Option {
-  type: "zip";
-  default?: string;
-}
-
 export interface StringTabOption extends Option {
   type: "string_tab";
   default?: string;
@@ -101,7 +96,6 @@ export interface TabOption extends Option {
       | NumberOption
       | SelectOption
       | FileOption
-      | ZipOption
       | StringTabOption
     )[];
   }[];
@@ -118,7 +112,6 @@ export interface ConnectionConfiguration {
     | NumberOption
     | SelectOption
     | FileOption
-    | ZipOption
     | TabOption
   )[];
   advanced_values: (
@@ -128,7 +121,6 @@ export interface ConnectionConfiguration {
     | NumberOption
     | SelectOption
     | FileOption
-    | ZipOption
     | TabOption
   )[];
   overrideDefaultFreq?: number;
@@ -750,10 +742,10 @@ For example, specifying .*-support.* as a "channel" will cause the connector to
     description: "Configure Google Sites connector",
     values: [
       {
-        type: "zip",
+        type: "file",
         query: "Enter the zip path:",
-        label: "Zip Path",
+        label: "File Locations",
-        name: "zip_path",
+        name: "file_locations",
         optional: false,
         description:
           "Upload a zip file containing the HTML of your Google Site",