diff --git a/packages/core/stories/patterns/file-upload/file-upload.stories.tsx b/packages/core/stories/patterns/file-upload/file-upload.stories.tsx
new file mode 100644
index 00000000000..8395bb9d4f3
--- /dev/null
+++ b/packages/core/stories/patterns/file-upload/file-upload.stories.tsx
@@ -0,0 +1,373 @@
+import { faker } from "@faker-js/faker";
+import {
+  Button,
+  Divider,
+  FileDropZone,
+  FileDropZoneIcon,
+  FileDropZoneTrigger,
+  FlexLayout,
+  Spinner,
+  StackLayout,
+  StatusIndicator,
+  Text,
+  Tooltip,
+  useId,
+} from "@salt-ds/core";
+import {
+  DeleteIcon,
+  PauseIcon,
+  PlayIcon,
+  ProgressOnholdIcon,
+  RefreshIcon,
+} from "@salt-ds/icons";
+import {
+  StaticList,
+  StaticListItem,
+  StaticListItemContent,
+} from "@salt-ds/lab";
+import type { Meta } from "@storybook/react";
+import { clsx } from "clsx";
+import {
+  Fragment,
+  type SyntheticEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+export default {
+  title: "Patterns/File Upload",
+} as Meta;
+
+type FileItemStatus =
+  | "initial"
+  | "failedValidation"
+  | "success"
+  | "uploading"
+  | "paused"
+  | "failedConnection";
+
+function getStatusDecoration(status: FileItemStatus) {
+  switch (status) {
+    case "failedValidation":
+    case "failedConnection":
+      return <StatusIndicator status="error" />;
+    case "uploading":
+      return <Spinner size="small" />;
+    case "success":
+      return <StatusIndicator status="success" />;
+    case "paused":
+      return <ProgressOnholdIcon />;
+  }
+}
+
+function fileSize(bytes: number) {
+  const sizeFormatter = new Intl.NumberFormat([], {
+    style: "unit",
+    unit: "byte",
+    notation: "compact",
+    unitDisplay: "narrow",
+  });
+  return sizeFormatter.format(bytes);
+}
+
+function getDescription({
+  totalSize,
+  currentSize = 0,
+}: { totalSize: number; currentSize?: number }) {
+  const downloadCompleted = currentSize === totalSize;
+  if (totalSize && !downloadCompleted) {
+    return `${fileSize(currentSize)} of ${fileSize(totalSize)}`;
+  }
+  return `${fileSize(currentSize)}`;
+}
+
+const updateInterval = 500;
+
+const FileItem = ({
+  file,
+  handleDelete,
+  badConnection,
+}: {
+  file: File;
+  handleDelete: (file: File) => void;
+  badConnection?: boolean;
+}) => {
+  const id = useId();
+  const [status, setStatus] = useState<FileItemStatus>("initial");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [currentSize, setCurrentSize] = useState(0);
+
+  const validFile = useCallback((file: File) => {
+    if (file.type !== "application/pdf") {
+      setErrorMessage("Invalid format. Files must be in .PDF format");
+      return false;
+    }
+
+    if (file.size > 100_000) {
+      setErrorMessage("Exceeds file size. 100KB file size limit.");
+      return false;
+    }
+
+    return true;
+  }, []);
+
+  useEffect(() => {
+    if (file && validFile(file)) {
+      setTimeout(() => {
+        // emulate upload
+        setStatus("uploading");
+      }, 700);
+    } else {
+      setStatus("failedValidation");
+    }
+  }, [file, validFile]);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    if (status === "uploading") {
+      const update = () => {
+        setCurrentSize((old) => {
+          if (old !== file.size) {
+            timeout = setTimeout(update, updateInterval);
+
+            if (badConnection && Math.random() > 0.7) {
+              setStatus("failedConnection");
+              setErrorMessage("Connection failed. Please try again.");
+              return old;
+            }
+
+            return Math.min(old + Math.random() * 1000, file.size);
+          }
+
+          setStatus("success");
+          return old;
+        });
+      };
+
+      timeout = setTimeout(update, updateInterval);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [status, file.size, badConnection]);
+
+  return (
+    <StaticListItem>
+      <div
+        style={{
+          minHeight: "var(--salt-size-base)",
+          minWidth: "var(--salt-size-icon)",
+          display: "flex",
+          alignItems: "center",
+          height: "min-content",
+        }}
+      >
+        {getStatusDecoration(status)}
+      </div>
+      <StaticListItemContent>
+        <StackLayout gap={0.5}>
+          <Text color="inherit" id={`label-${id}`}>
+            {file.name}
+          </Text>
+          <Text
+            styleAs="label"
+            color={errorMessage === "" ? "secondary" : "error"}
+            id={`secondary-label-${id}`}
+          >
+            {errorMessage === ""
+              ? getDescription({ totalSize: file.size, currentSize })
+              : errorMessage}
+          </Text>
+        </StackLayout>
+      </StaticListItemContent>
+      {status === "failedConnection" && (
+        <Tooltip content="Retry upload" placement="top">
+          <Button
+            id={`retry-button-${id}`}
+            appearance="transparent"
+            aria-label="Retry upload"
+            aria-labelledby={clsx(
+              `retry-button-${id}`,
+              `label-${id}`,
+              `secondary-label-${id}`,
+            )}
+            onClick={() => {
+              setStatus("uploading");
+              setErrorMessage("");
+            }}
+          >
+            <RefreshIcon aria-hidden />
+          </Button>
+        </Tooltip>
+      )}
+      {status === "paused" && (
+        <Tooltip content="Resume upload" placement="top">
+          <Button
+            id={`resume-button-${id}`}
+            appearance="transparent"
+            aria-label="Resume upload"
+            aria-labelledby={clsx(
+              `resume-button-${id}`,
+              `label-${id}`,
+              `secondary-label-${id}`,
+            )}
+            onClick={() => {
+              setStatus("uploading");
+            }}
+          >
+            <PlayIcon aria-hidden />
+          </Button>
+        </Tooltip>
+      )}
+      {status === "uploading" && (
+        <Tooltip content="Pause upload" placement="top">
+          <Button
+            id={`pause-button-${id}`}
+            appearance="transparent"
+            aria-label="Pause upload"
+            aria-labelledby={clsx(
+              `pause-button-${id}`,
+              `label-${id}`,
+              `secondary-label-${id}`,
+            )}
+            onClick={() => {
+              setStatus("paused");
+            }}
+          >
+            <PauseIcon aria-hidden />
+          </Button>
+        </Tooltip>
+      )}
+      {status !== "uploading" && (
+        <Tooltip content="Remove" placement="top">
+          <Button
+            id={`remove-button-${id}`}
+            appearance="transparent"
+            aria-label="Remove"
+            aria-labelledby={clsx(
+              `remove-button-${id}`,
+              `label-${id}`,
+              `secondary-label-${id}`,
+            )}
+            onClick={() => handleDelete(file)}
+          >
+            <DeleteIcon aria-hidden />
+          </Button>
+        </Tooltip>
+      )}
+    </StaticListItem>
+  );
+};
+
+export const FileUploadExample = () => {
+  const [files, setFiles] = useState<{ file: File; badConnection?: boolean }[]>(
+    [],
+  );
+
+  const handleFiles = (_: SyntheticEvent, files: File[]) => {
+    setFiles((old) =>
+      old.concat(
+        files.map((file) => ({
+          file,
+        })),
+      ),
+    );
+  };
+
+  const handleDelete = (fileToRemove: File) => {
+    setFiles((old) => old.filter((file) => file.file !== fileToRemove));
+  };
+
+  return (
+    <StackLayout style={{ height: "80vh" }}>
+      <FlexLayout direction="row" wrap>
+        <Button
+          onClick={() => {
+            const file = new File(
+              [new ArrayBuffer(Math.random() * 12000)],
+              faker.system.commonFileName("pdf"),
+              {
+                type: "application/pdf",
+              },
+            );
+            setFiles((old) => old.concat({ file }));
+          }}
+        >
+          Add PDF that will succeed
+        </Button>
+        <Button
+          onClick={() => {
+            const file = new File(
+              [new ArrayBuffer(Math.random() * 12000)],
+              faker.system.commonFileName("pdf"),
+              {
+                type: "application/pdf",
+              },
+            );
+            setFiles((old) => old.concat({ file, badConnection: true }));
+          }}
+        >
+          Simulate bad connection
+        </Button>
+        <Button
+          onClick={() => {
+            const file = new File(
+              [new ArrayBuffer(200000)],
+              faker.system.commonFileName("pdf"),
+              {
+                type: "application/pdf",
+              },
+            );
+            setFiles((old) => old.concat({ file }));
+          }}
+        >
+          Add large PDF
+        </Button>
+        <Button
+          onClick={() => {
+            const file = new File(
+              [new ArrayBuffer(10000)],
+              faker.system.commonFileName("png"),
+              {
+                type: "image/png",
+              },
+            );
+            setFiles((old) => old.concat({ file }));
+          }}
+        >
+          Add image
+        </Button>
+      </FlexLayout>
+      <StackLayout gap={1}>
+        <Text styleAs="h2">Upload files</Text>
+        <Text>
+          Please drag and drop file(s) in the below area; or browse files by
+          using the button.
+        </Text>
+      </StackLayout>
+      <FileDropZone onDrop={handleFiles}>
+        <FileDropZoneIcon />
+        <strong>Drop files here or</strong>
+        <FileDropZoneTrigger accept=".pdf" onChange={handleFiles} />
+        <Text>Files must be in .PDF format. 100KB file size limit.</Text>
+      </FileDropZone>
+      <StaticList style={{ width: "100%" }}>
+        {files.map(({ file, badConnection }, index) => (
+          <Fragment key={file.name + file.lastModified}>
+            <FileItem
+              file={file}
+              handleDelete={handleDelete}
+              badConnection={badConnection}
+            />
+            {index < files.length - 1 && (
+              <Divider variant="tertiary" aria-hidden />
+            )}
+          </Fragment>
+        ))}
+      </StaticList>
+    </StackLayout>
+  );
+};
diff --git a/site/docs/patterns/contact-details.mdx b/site/docs/patterns/contact-details.mdx
index cf7fbe1f158..927a737b942 100644
--- a/site/docs/patterns/contact-details.mdx
+++ b/site/docs/patterns/contact-details.mdx
@@ -99,7 +99,7 @@ We recommend emails to be interactive links by default, you can also define othe
 
  <Diagram
     src="/img/patterns/contact-details/contact-details-using-links.png"
-    alt="Contact Details using Icon Descriptors"
+    alt="Contact Details using links"
     caption="An example of contact details using links."
     border
   />
diff --git a/site/docs/patterns/file-upload.mdx b/site/docs/patterns/file-upload.mdx
new file mode 100644
index 00000000000..38ae91ed5db
--- /dev/null
+++ b/site/docs/patterns/file-upload.mdx
@@ -0,0 +1,160 @@
+---
+title: File upload
+layout: DetailPattern
+tags:
+  - pattern
+aliases:
+  - /salt/patterns/file-upload
+data:
+  resources: []
+  components: ["File Drop Zone", "Static List"]
+---
+
+A file upload allows users to transfer one or multiple files from an external source to the web application. This pattern is commonly embedded in forms or as a standalone element.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload.png"
+  alt="File upload"
+  border
+/>
+
+## When to use
+
+Use this pattern to:
+
+- Upload files by dragging and dropping, or by using a button to select a file in a new window or file browser.
+- Upload single or multiple files within modals or full-page experiences.
+- Display file upload progress, file listings, and management options.
+
+<ExampleContainer type="positive" customPillText="Best practices">
+  - Consider using a full-page layout or a drawer if additional actions need to be performed on the files. 
+  - When used in dialogs, ensure that submit actions are disabled until the file upload is complete. 
+  - When used in drawers, the upload status (e.g., completed) should remain  visible regardless of the drawer's open or close actions.
+</ExampleContainer>
+
+## How to build
+
+### Anatomy
+
+A file upload pattern typically consists of two main functional areas:
+
+1. **Upload area:** This provides a target area for users to drag and drop files. It is implemented using the [`FileDropZone`](/salt/components/file-drop-zone) component.
+2. **File upload list:** This area can display a single item or multiple items stacked vertically. Items in this list are constructed using the [`StaticList`](/salt/components/static-list) component.
+
+These functional areas can be enhanced with text elements, such as headers and descriptions, to assist users in making informed decisions.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-anatomy.png"
+  alt="File upload anatomy"
+  border
+/>
+
+### Layout
+
+- Use the [`StackLayout`](/salt/components/stack-layout) to display the File drop zone, file upload items and text elements that make up file upload in a column.
+- Use the [`StackLayout`](/salt/components/flex-layout) with a gap of 1 to position the text elements.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-layout.png"
+  alt="File upload with layout annotations."
+  border
+/>
+
+## Unrestricted space areas
+
+The file drop zone component enables users to upload files by providing a designated drag-and-drop target area. It supports both single and multiple file uploads in unrestricted space areas.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-unrestricted-space-areas.png"
+  alt="File upload in an unrestricted space area."
+  border
+/>
+
+<ExampleContainer type="positive" customPillText="Best practices">
+  - The file drop zone component should support both single and multiple file uploads.
+  - Restrict file selection to allowed file types.
+  - Include text elements to assist users in making informed decisions.
+</ExampleContainer>
+
+## Space-restricted areas
+
+In space-restricted scenarios, single file uploads can be facilitated using a button. This button opens a file browser, allowing the user to select a file.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-restricted-space-areas.png"
+  alt="File upload in a restricted space area."
+  border
+/>
+
+<ExampleContainer type="positive" customPillText="Best practices">
+  - Use a button for single file uploads only
+  - Restrict file selection to allowed file types
+  - Include text elements to help users make informed decisions
+</ExampleContainer>
+
+## Uploading files
+
+Ensure users are aware of the upload progress for each file. Use the progress component and a secondary label to display relevant information, helping users manage their expectations. Use action buttons to assist users in managing files. For example, a pause button can be used to put a file upload on hold.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-pause-action.png"
+  alt="File upload with a pause action."
+  border
+/>
+
+Following a pause action, play and delete buttons can be used to resume or remove the upload, respectively, as shown in the example below.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-resume-action.png"
+  alt="File upload with a resume action."
+  border
+/>
+
+## Success validation
+
+Inform users when a file upload has been successfully completed. Once  the process is finished, provide users with the ability to remove the  file or perform other related actions.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-success-validation.png"
+  alt="File upload with success validation."
+  border
+/>
+
+## Error validation
+
+### File error
+
+Error validation can occur independently at the file item level without impacting other files in the group. In such case scenarios, the secondary label should clearly explain the issue and offer a solution. A refresh button can be used to retry the upload after error validation.
+
+Inform users when a file upload has been successfully completed. Once  the process is finished, provide users with the ability to remove the  file or perform other related actions.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-file-error.png"
+  alt="File upload with a file error."
+  border
+/>
+
+### Group error
+
+Errors can occur at the group level. In such scenarios, error messages should be displayed within the file drop zone component. For instance, if only 2 files can be uploaded, the error message should clearly communicate this limit and guide the user, as demonstrated  below. For more details, see file drop zone validation.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-group-error.png"
+  alt="File upload with a group error mesage."
+  border
+/>
+
+Alternatively, group error messages can be displayed using a banner component positioned below the file drop zone. In such scenarios, ensure that error messages are displayed exclusively in the banner and not  within the file drop zone itself.
+
+<Diagram
+  src="/img/patterns/file-upload/file-upload-group-error-banner.png"
+  alt="File upload with a group error mesage banner."
+  border
+/>
+
+<ExampleContainer type="positive" customPillText="Best practices">
+  - Clearly communicate the issue and offer a solution
+  - Ensure error messages are simple and concise
+</ExampleContainer>
+
+:fragment{src="./fragments/feedback.mdx"}
diff --git a/site/public/img/patterns/file-upload/file-upload-anatomy.png b/site/public/img/patterns/file-upload/file-upload-anatomy.png
new file mode 100644
index 00000000000..257321e85b7
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-anatomy.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-file-error.png b/site/public/img/patterns/file-upload/file-upload-file-error.png
new file mode 100644
index 00000000000..1ca460d65b2
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-file-error.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-group-error-banner.png b/site/public/img/patterns/file-upload/file-upload-group-error-banner.png
new file mode 100644
index 00000000000..c248ef22e96
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-group-error-banner.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-group-error.png b/site/public/img/patterns/file-upload/file-upload-group-error.png
new file mode 100644
index 00000000000..2d758552de9
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-group-error.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-layout.png b/site/public/img/patterns/file-upload/file-upload-layout.png
new file mode 100644
index 00000000000..3d2f8f1b2fb
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-layout.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-pause-action.png b/site/public/img/patterns/file-upload/file-upload-pause-action.png
new file mode 100644
index 00000000000..706dae92eec
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-pause-action.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-restricted-space-areas.png b/site/public/img/patterns/file-upload/file-upload-restricted-space-areas.png
new file mode 100644
index 00000000000..f635c0b9805
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-restricted-space-areas.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-resume-action.png b/site/public/img/patterns/file-upload/file-upload-resume-action.png
new file mode 100644
index 00000000000..415b530d3b5
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-resume-action.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-success-validation.png b/site/public/img/patterns/file-upload/file-upload-success-validation.png
new file mode 100644
index 00000000000..94f4a9b88d7
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-success-validation.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload-unrestricted-space-areas.png b/site/public/img/patterns/file-upload/file-upload-unrestricted-space-areas.png
new file mode 100644
index 00000000000..22b913461e7
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload-unrestricted-space-areas.png differ
diff --git a/site/public/img/patterns/file-upload/file-upload.png b/site/public/img/patterns/file-upload/file-upload.png
new file mode 100644
index 00000000000..0236e2c200b
Binary files /dev/null and b/site/public/img/patterns/file-upload/file-upload.png differ