Function UploadModal

components/actions/uploadModal.tsx:30–218

(props: {
  open: boolean;
  setOpen: (open: boolean) => void;
  loadActions: () => Promise<void>;
  api_id: string | undefined;
  updateSelectedApiTab: (apiId: string | undefined) => void;
})

}

export default function UploadModal(props: {
  open: boolean;
  setOpen: (open: boolean) => void;
  loadActions: () => Promise<void>;
  api_id: string | undefined;
  updateSelectedApiTab: (apiId: string | undefined) => void;
}) {
  const { profile } = useProfile();
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [error, setError] = React.useState<{
    message: string;
    error: Record<string, any>;
  } | null>(null);

  useEffect(() => {
    if (!profile) return;
    uppy = new Uppy({
      autoProceed: true,
      allowMultipleUploadBatches: false,
      restrictions: {
        maxNumberOfFiles: 1,
        maxFileSize: 100_000_000,
        allowedFileTypes: ["application/json", ".yaml", ".txt"],
      },
    });
    uppy.on("file-added", async (file: UppyFile) => {
      if (isLoading) return;
      setError(null);
      setIsLoading(true);
      const text = await file.data.text();
      let json: Record<string, any>;
      try {
        // First, try JSON
        json = JSON.parse(text);
      } catch (e) {
        try {
          // Try yaml
          json = parse(text);
        } catch (e) {
          setError({
            message:
              "Uploaded file contents has invalid format: must be JSON or YAML",
            error: {},
          });
          setIsLoading(false);
          uppy.removeFile(file.id);
          return;
        }
      }
      const api_id = props.api_id;
      const res = await fetch("/api/swagger-to-actions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          swagger: json,
          api_id,