chore(site): add FileUpload stories (#12456)

Related to https://github.com/coder/coder/issues/12260

site/src/components/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,35 @@
+import Link from "@mui/material/Link";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "./FileUpload";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "components/FileUpload",
+  component: FileUpload,
+  args: {
+    title: "Upload template",
+    description: (
+      <>
+        The template has to be a .tar or .zip file. You can also use our{" "}
+        <Link href="/starter-templates">starter templates</Link> to getting
+        started with Coder.
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {};
+
+export const Uploading: Story = {
+  args: {
+    isUploading: true,
+  },
+};
+
+export const WithFile: Story = {
+  args: {
+    file: new File([], "template.zip"),
+  },
+};

site/src/components/FileUpload/FileUpload.tsx

@@ -64,11 +64,13 @@ export const FileUpload: FC<FileUploadProps> = ({
         {...fileDrop}
       >
         <Stack alignItems="center" spacing={1}>
-          {isUploading ? (
-            <CircularProgress size={32} />
-          ) : (
-            <UploadIcon css={styles.icon} />
-          )}
+          <div css={styles.iconWrapper}>
+            {isUploading ? (
+              <CircularProgress size={32} />
+            ) : (
+              <UploadIcon css={styles.icon} />
+            )}
+          </div>
 
           <Stack alignItems="center" spacing={0.5}>
             <span css={styles.title}>{title}</span>
@@ -155,6 +157,15 @@ const styles = {
     opacity: 0.75,
   },
 
+  // Used to maintain the size of icon and spinner
+  iconWrapper: {
+    width: 64,
+    height: 64,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
   icon: {
     fontSize: 64,
   },